Gratis ES5 / ES6 JavaScript bestandsupload plugin - Uppy

Een van de lastigste vorminvoer naar ontwerp is de bestand upload. Het heeft een standaard HTML-stijl, maar het is niet het mooiste van de wereld.

uppy neemt bestandsuploads naar een geheel nieuw niveau met een aangepaste interface en een dynamisch laadproces in Ajax-stijl.

Het werkt op ES5 / ES6-code, zodat je je web-apps kunt bouwen met de nieuwste JavaScript-standaarden. En zelfs ondersteunt bestandsuploads van cloudopslagsites zoals Dropbox of Google Drive, dus het is a veelzijdig script voor het uploaden van bestanden voor het web.

Uppy is volledig gratis en open-source, met een repository op GitHub. De eenvoudigste manier om deze plug-in te installeren is via npm of Yarn, dus dat kan voer het uit als een echt pakket.

Zodra u de bestanden aan uw website hebt toegevoegd, hoeft u alleen maar inclusief het Uppy.js-bestand en de CSS-code. Vervolgens richt u zich op het gewenste invoerveld en neemt Uppy de rest voor u op.

Het heeft een unieke interface die ziet eruit als een grote vierkante plaatsing om bestanden te slepen en neer te zetten. Je kan ook selecteer items van uw harde schijf of zelfs upload bestanden op afstand van externe URL's. Best gestoord!

U kunt het volledige instellingsproces op de documentatiepagina vinden, maar dan wel vereist op zijn minst enig begrip van ECMAScript 6. Deze bibliotheek kijkt naar de toekomst van scripting en is niet het gemakkelijkste om te gebruiken met pure vanille JavaScript.

Maar als je serieus bezig bent met webontwikkeling, is het de moeite waard om ES6 toch te leren. Je kunt vinden tonnen bronnen online voor zelfstudie en u kunt Uppy zelfs als uw eerste gebruiken “echt” project om in te duiken en te leren.

Bekijk het Dashboard-voorbeeld voor zie Uppy in actie. Voor deze pagina, de uploaden is verborgen achter een triggerknop, waar u op de knop klikt om een ​​modaal uploadveld weer te geven.

Van daaruit kunt u selecteren of u een foto wilt uploaden vanaf uw computer, vanaf het internet of zelfs vanaf uw webcam!

De pagina Voorbeelden biedt een hoop om doorheen te kijken, inclusief een drag & drop voorbeeld, samen met een geïnternationaliseerde demopagina.

Maar om echt te leren hoe dit werkt, raad ik aan de documenten te doorzoeken en door de hoofdrepos van GitHub te bladeren. Je kunt ook je gedachten delen met de makers op Twitter @transloadit.