Filepicker? Carica file di grandi dimensioni tramite HTML5 su S3 senza alcun backend

Question

Carica file con multipart/form-data è semplice e funziona bene la maggior parte del tempo finché non inizi a concentrarti sul caricamento di file di grandi dimensioni. Se look closely cosa succede durante un caricamento di file:

• client invia richiesta POST con il contenuto del file nel corpo

• web server accetta la richiesta e avvia il trasferimento di dati (o restituisce l'errore 413 se la dimensione del file è superare il limite)

• server web inizia a popolare buffer (dipende del file e buffer size), immagazzinarli sul disco e inviarlo via presa/rete al back-end

• back-end verifica l'autenticazione (date un'occhiata, una volta che il file viene caricato)

• back-end legge il file e tagli alcuni header Content-Disposition, Content-Type, lo memorizza sul disco nuovo Esegue back-end tutto quello che devi fare con il file

per evitare tale sovraccarico noi scarichiamo file su disco (Nginx client_body_in_file_only) e gestire la richiamata da trasmettere a valle della linea. Quindi il gestore della coda preleva il file e fa quanto richiesto. Funziona per la comunicazione inter-server piuttosto slick, ma dobbiamo risolvere problemi simili con il caricamento lato client.

Abbiamo anche una soluzione di upload S3 lato client. Non si verifica alcuna interazione di back-end. Per il caricamento di video gestiamo il video per convertire nel formato h.264 Baseline/AAC con Zencoder.

Attualmente utilizziamo l'uploader Flash modificato basato su s3-swf-upload-plugin con la combinazione di Zencoder JS SDK che è davvero efficiente ma utilizza Flash.

Domanda. Come raggiungere lo stesso obiettivo con l'uploader di file HTML5? Filepicker.io and Zencoder risolve il problema? Qual è il modo consigliato di gestire il caricamento di file HTML5 senza interazione di back-end?

I requisiti sono i seguenti:

• HTML5, non lampeggiano
• di caricare video con il post-processing per renderlo compatibile con i lettori HTML5 e mobile
• per caricare le immagini addebbitato post-processing (ridimensionare, ritagliare, ruotare)
• per caricare documenti come PDF con una funzionalità di anteprima

fa https://www.filepicker.com fare un buon lavoro?

Answer 1

I requisiti sono i seguenti:

HTML5, non lampeggia

filepicker supporta ora un widget reattivo completo che è puro html e css.

di caricare video con il post-processing per renderlo compatibile con i lettori HTML5 e mobile

filepicker offre ora la possibilità di transcodificare i formati video in H264 & WebM per la riproduzione cellulare. https://www.filepicker.com/documentation/file_processing/video_conversion/video

per caricare le immagini addebbitato post-processing (ridimensionare, ritagliare, ruotare)

filepicker fa offerta Crop & ruotare nel nuovo widget così come ridimensionamento, affilatura e watermarking tramite API.

per caricare documenti come PDF con una funzionalità di anteprima

Offriamo la possibilità di convertire da 19 diversi formati di file per numerosi formati di output. https://www.filepicker.com/documentation/file_processing/document_conversion/document

Answer 2

Per caricare un file di grandi dimensioni a S3 c'è un REST API for Multipart Upload, che funziona nel seguente modo

1. iniziato un upload
2. upload di contenuti file diviso in più richieste
3. terminare l'upload

l'API è disponibile anche per chiamate da javascript e il file caricato può essere diviso in più richieste utilizzando File/Blob slice API

L'unico problema è che per poter autenticare su S3 da javascript è necessario passare i dettagli di autenticazione. Solitamente questo è risolto da alcuni strati intermedi come PHP, quindi i dettagli di autenticazione non sono memorizzati in file javascript.

domanda simile su SO: HTML5 and Amazon S3 Multi-Part uploads

EDIT

• operazioni di immagine come il ritaglio e il ridimensionamento può essere fatto da tela. Basta caricare l'immagine locale nell'elemento canvas, apportare le modifiche necessarie e quindi è possibile generare il flusso di dati immagine jpeg/png utilizzando il metodo canvas.toDataUrl.
• PDF anteprima è possibile, c'è un lib PDF.js che può rendere file PDF locale nella tela
• Per quanto ne sappia non v'è alcun modo per fare la conversione video sul lato client

Answer 3

sto usando per filepicker 2 anni ora, e senza dubbio vale il prezzo. non provare a gestire il caricamento di file (da Google Drive, da iOS, dalla mia macchina fotografica, da Dropbox ...) Filepicker gestisce molto bene e ti fornisce un URL pronto per l'uso. Dedicare più tempo a lavorare sul proprio core business, caricamento di file è veramente facile da delegare