Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@uppy/drag-drop
Advanced tools
@uppy/drag-drop is a module of the Uppy file uploader library that provides a drag-and-drop interface for file uploads. It allows users to drag files from their file system and drop them into a designated area on a web page to initiate the upload process.
Basic Drag-and-Drop File Upload
This code initializes Uppy and uses the DragDrop plugin to create a drag-and-drop area for file uploads. The 'file-added' event logs the added file to the console.
const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');
const uppy = Uppy();
uppy.use(DragDrop, {
target: '#drag-drop-area',
inline: true,
width: '100%',
height: '100%',
note: 'Drag & drop your files here'
});
uppy.on('file-added', (file) => {
console.log('Added file', file);
});
Customizing Drag-and-Drop Area
This code demonstrates how to customize the drag-and-drop area with a custom note and localized strings for the interface.
const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');
const uppy = Uppy();
uppy.use(DragDrop, {
target: '#drag-drop-area',
inline: true,
width: '100%',
height: '100%',
note: 'Drag & drop your files here',
locale: {
strings: {
dropHereOr: 'Drop here or %{browse}',
browse: 'browse'
}
}
});
Handling Upload Progress
This code shows how to handle upload progress events. It uses the XHRUpload plugin to upload files to a specified endpoint and logs the upload progress to the console.
const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');
const XHRUpload = require('@uppy/xhr-upload');
const uppy = Uppy();
uppy.use(DragDrop, {
target: '#drag-drop-area',
inline: true
});
uppy.use(XHRUpload, {
endpoint: 'https://your-upload-endpoint.com/upload'
});
uppy.on('upload-progress', (file, progress) => {
console.log(`File: ${file.name}, Progress: ${progress.bytesUploaded}/${progress.bytesTotal}`);
});
react-dropzone is a popular React component for handling file drag-and-drop uploads. It provides a simple and flexible API for integrating drag-and-drop functionality into React applications. Compared to @uppy/drag-drop, react-dropzone is more focused on React integration and does not include the broader file management and upload capabilities of Uppy.
dropzone is a standalone JavaScript library that provides drag-and-drop file uploads with image previews. It is highly customizable and easy to integrate into any web application. Unlike @uppy/drag-drop, dropzone is not part of a larger file management library and focuses solely on the drag-and-drop upload functionality.
fine-uploader is a comprehensive JavaScript library for file uploads that includes drag-and-drop support, image previews, and retry capabilities. It offers a wide range of features for handling file uploads but is more complex to set up compared to @uppy/drag-drop, which benefits from Uppy’s modular and plugin-based architecture.
Droppable zone UI for Uppy. Drag and drop files into it to upload.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
const Uppy = require('@uppy/core')
const DragDrop = require('@uppy/drag-drop')
const uppy = Uppy()
uppy.use(DragDrop, {
target: '#upload'
})
$ npm install @uppy/drag-drop --save
We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit's CDN: Edgly. In that case Uppy
will attach itself to the global window.Uppy
object. See the main Uppy documentation for instructions.
Documentation for this plugin can be found on the Uppy website.
0.30.4
Released: 2019-04-04
| Package | Version | Package | Version | |-|-|-|-| | @uppy/aws-s3-multipart | 0.30.4 | @uppy/progress-bar | 0.30.4 | | @uppy/aws-s3 | 0.30.4 | @uppy/provider-views | 0.30.4 | | @uppy/companion-client | 0.28.4 | @uppy/react | 0.30.4 | | @uppy/companion | 0.17.4 | @uppy/redux-dev-tools | 0.30.4 | | @uppy/core | 0.30.4 | @uppy/robodog | 0.30.4 | | @uppy/dashboard | 0.30.4 | @uppy/status-bar | 0.30.4 | | @uppy/drag-drop | 0.30.4 | @uppy/thumbnail-generator | 0.30.4 | | @uppy/dropbox | 0.30.4 | @uppy/transloadit | 0.30.4 | | @uppy/file-input | 0.30.4 | @uppy/tus | 0.30.4 | | @uppy/form | 0.30.4 | @uppy/url | 0.30.4 | | @uppy/golden-retriever | 0.30.4 | @uppy/utils | 0.30.4 | | @uppy/google-drive | 0.30.4 | @uppy/webcam | 0.30.4 | | @uppy/informer | 0.30.4 | @uppy/xhr-upload | 0.30.4 | | @uppy/instagram | 0.30.4 | uppy | 0.30.4 |
youCanOnlyUploadFileTypes
locale: In some languages, it probably doesn't make much sense to put the list
of allowed file types at the end. The list of mime types/extensions may not be desired at all, so now you can omit %{types} to not show it. (#1374 / @goto-bus-stop)FAQs
Droppable zone UI for Uppy. Drag and drop files into it to upload.
The npm package @uppy/drag-drop receives a total of 121,659 weekly downloads. As such, @uppy/drag-drop popularity was classified as popular.
We found that @uppy/drag-drop demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.