{"id":10330,"date":"2018-08-17T09:10:14","date_gmt":"2018-08-17T14:10:14","guid":{"rendered":"http:\/\/carterembry.com\/\/?p=10330"},"modified":"2025-08-05T09:05:23","modified_gmt":"2025-08-05T14:05:23","slug":"creating-flexible-and-reusable-react-file-uploaders","status":"publish","type":"post","link":"https:\/\/carterembry.com\/it\/2018\/creating-flexible-and-reusable-react-file-uploaders\/%20","title":{"rendered":"Creare caricatori di file React flessibili e riutilizzabili"},"content":{"rendered":"
\n
\n\t

Daniel \u00e8 stato recentemente presentato nel blog di Eventbrite Engineering e siamo molto orgogliosi del lavoro che svolge.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

\n
\n\t\t\t\n\t\t\t\"\"\n\t\t\t<\/a><\/div>\n\n<\/div><\/div><\/div>
\n
\n\t

Il team di creazione di eventi di Eventbrite aveva bisogno di un caricatore di immagini basato su React che offrisse flessibilit\u00e0 pur presentando un'interfaccia utente semplice. I componenti del caricatore di immagini dovevano funzionare in una variet\u00e0 di scenari come parti riutilizzabili che potevano essere composte in modo diverso a seconda delle esigenze. Continua a leggere per scoprire come abbiamo risolto questo problema.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

Cos'\u00e8 un caricatore di file?<\/h3>\n
\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n
\n\t

In passato, se volevi ottenere un file dai tuoi utenti web, dovevi usare un file\u00a0\"Tipo di input \"file<\/a>. Questo approccio era limitato in molti modi, soprattutto per il fatto che\u00a0\u00e8 un input<\/i>I dati vengono trasmessi solo al momento dell'invio del modulo, quindi gli utenti non hanno la possibilit\u00e0 di vedere il feedback prima o durante il caricamento.<\/p>\n

Per questo motivo, gli uploader di React di cui parleremo non sono dei form input, ma degli \"strumenti di trasporto immediato\". L'utente sceglie un file, l'uploader lo trasporta su un server remoto e riceve una risposta con un identificatore unico. Questo identificativo viene immediatamente associato a un record del database o inserito in un campo nascosto del modulo.<\/p>\n<\/div>\n<\/div><\/div><\/div>

\n
\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t<\/video>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n
\n\t

Questa nuova strategia offre un'enorme flessibilit\u00e0 rispetto ai processi di caricamento tradizionali. Ad esempio, il disaccoppiamento del trasporto dei file dall'invio dei moduli ci permette di\u00a0caricare direttamente su archivi di terze parti (come Amazon S3) senza inviare i file attraverso i nostri server<\/strong>.<\/p>\n

Il compromesso per questa flessibilit\u00e0 \u00e8 la complessit\u00e0: i caricatori di file con il drag-and-drop sono bestie complesse. Avevamo anche bisogno che il nostro uploader React fosse semplice e usabile. Trovare un percorso che garantisse sia la flessibilit\u00e0 che la facilit\u00e0 d'uso non \u00e8 stato facile.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

Identificazione delle responsabilit\u00e0<\/h3>\n
\n\t

Stabilire le responsabilit\u00e0 di un uploader sembra facile... si carica, giusto? Certo, ma ci sono molte altre cose da fare perch\u00e9 ci\u00f2 avvenga:<\/p>\n