{"id":28195,"date":"2022-03-24T20:16:02","date_gmt":"2022-03-24T20:16:02","guid":{"rendered":"http:\/\/Add-Drag-and-Drop-for-Media-Files-with-React-(12)"},"modified":"2025-02-09T12:26:25","modified_gmt":"2025-02-09T20:26:25","slug":"add-drag-and-drop-for-media-files-with-react-12","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/add-drag-and-drop-for-media-files-with-react-12\/","title":{"rendered":"Add Drag and Drop for Images with React (1\/2)"},"content":{"rendered":"

As the world becomes increasingly interconnected, file sharing and exchange (mainly images) are becoming more prevalent. As a result, particular care must be taken in making the process as easy as possible.<\/p>\n

This is the first part of a two-part series. In this post, we\u2019ll look at how to add drag and drop functionality for media files to a React application, allowing you to select multiple images at once and, not only that, preview the selected images before uploading. Before uploading, you will also have the opportunity to delete an image if you wish to.<\/p>\n

Here\u2019s a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Project Setup<\/h2>\n

Create a new React app using the following command:<\/p>\n

    npx create-react-app drag_and_drop_demo\n<\/code><\/span><\/pre>\n
Next, let\u2019s add the project dependencies. We will be using Ant Design<\/a> to render our UI components for this project. Add it to your project using the following command:<\/p>\n
    npm<\/span> i<\/span> antd<\/span> @ant-design<\/span>\/icons\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, we need to import the antd CSS. To do this, open src\/App.css<\/code> and edit its content to match the following:<\/p>\n
    @import<\/span> '~antd\/dist\/antd.css'<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Implement Drag and Drop Functionality<\/h2>\n
Create useFileSelection Hook<\/h3>\n
To keep our components lean and focused on presentation, we\u2019ll use hooks to inject the needed functionality into the component. In the src<\/code> folder, create a new folder called hooks<\/code>. This folder will hold the hooks we will create in this app – one for the drag and drop functionality and the other for preview.<\/p>\n
In the src\/hooks<\/code> folder, create a new file called useFileSelection.js<\/code> and add the following to it:<\/p>\n
    import<\/span> { useState } from<\/span> 'react'<\/span>;\n    const<\/span> useFileSelection = ()<\/span> =><\/span> {\n      const<\/span> [selectedFiles, setSelectedFiles] = useState([]);\n      const<\/span> addFile = (file<\/span>) =><\/span> {\n        setSelectedFiles((currentSelection<\/span>) =><\/span> [...currentSelection, file]);\n      };\n      const<\/span> removeFile = (file<\/span>) =><\/span> {\n        setSelectedFiles((currentSelection<\/span>) =><\/span> {\n          const<\/span> newSelection = currentSelection.slice();\n          const<\/span> fileIndex = currentSelection.indexOf(file);\n          newSelection.splice(fileIndex, 1<\/span>);\n          return<\/span> newSelection;\n        });\n      };\n      return<\/span> [addFile, removeFile];\n    };\n    export<\/span> default<\/span> useFileSelection;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We start by declaring a state variable for the selected files. Since we will be dealing with more than one file in the selection, we initialized it with an empty array.<\/p>\n
Next, we declare a function named addFile<\/code> to add a file to the array of selected files. The function takes a file and adds it to the currently selected files by using the setSelectedFiles<\/code> function to update the state.<\/p>\n
We also want to be able to remove a file from the list of selected files, so we declare a function named removeFile<\/code>, which accepts the file to be removed as a parameter. In the setSelectedFiles<\/code> function call, we pass a function that takes the selected files in state and does the following:<\/p>\n
    \n
  1. Creates a shallow copy of the current selection of files using the slice<\/a> function.<\/li>\n
  2. Gets the index of the provided file in the current selection of files.<\/li>\n
  3. Removes the file from the shallow copy using the splice<\/a> function.<\/li>\n
  4. Returns the new selection with the file removed.<\/li>\n<\/ol>\n
    Finally, we return an array containing the addFile<\/code> and removeFile<\/code> functions.<\/p>\n
    Create useFilePreview Hook<\/h3>\n
    In the src\/hooks<\/code> folder, create a new file named useFilePreview.js<\/code> and add the following to it:<\/p>\n
        import<\/span> { Modal } from<\/span> 'antd'<\/span>;\n    import<\/span> { useState } from<\/span> 'react'<\/span>;\n    const<\/span> useFilePreview = ()<\/span> =><\/span> {\n      const<\/span> [previewVisibility, setPreviewVisibility] = useState(false<\/span>);\n      const<\/span> [previewImage, setPreviewImage] = useState(null<\/span>);\n      const<\/span> [previewTitle, setPreviewTitle] = useState(''<\/span>);\n      const<\/span> getBase64Representation = (file<\/span>) =><\/span>\n        new<\/span> Promise<\/span>((resolve, reject<\/span>) =><\/span> {\n          const<\/span> reader = new<\/span> FileReader();\n          reader.readAsDataURL(file);\n          reader.onload = ()<\/span> =><\/span> resolve(reader.result);\n          reader.onerror = (error<\/span>) =><\/span> reject(error);\n        });\n      const<\/span> handlePreview = async<\/span> (file) => {\n        if<\/span> (!file.url && !file.preview) {\n          file.preview = await<\/span> getBase64Representation(file.originFileObj);\n        }\n        setPreviewImage(file.url || file.preview);\n        setPreviewVisibility(true<\/span>);\n        setPreviewTitle(\n          file.name || file.url.substring(file.url.lastIndexOf('\/'<\/span>) + 1<\/span>)\n        );\n      };\n      const<\/span> hidePreview = ()<\/span> =><\/span> {\n        setPreviewVisibility(false<\/span>);\n      };\n      const<\/span> previewContent = (\n        <Modal<\/span>\n          visible<\/span>={previewVisibility}<\/span>\n          title<\/span>={previewTitle}<\/span>\n          footer<\/span>={null}<\/span>\n          onCancel<\/span>={hidePreview}<\/span>\n        ><\/span>\n          <img<\/span> alt<\/span>={previewTitle}<\/span> style<\/span>={{<\/span> width:<\/span> '100<\/span>%' }} src<\/span>={previewImage}<\/span> \/><\/span>\n        <\/Modal<\/span>><\/span><\/span>\n      );\n      return<\/span> [handlePreview, previewContent];\n    };\n    export<\/span> default<\/span> useFilePreview;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In this hook, we declare three state variables. previewVisibility<\/code> is a boolean that determines whether the image preview should be rendered. previewImage<\/code> contains the base64 representation of the image to be previewed, while previewTitle<\/code> contains the title of the preview, which is the name of the file to be previewed.<\/p>\n
    Next, we declare a function named getBase64Representation<\/code> which takes a file and returns its base64<\/code> representation.<\/p>\n
    After this, we declare an asynchronous function named handlePreview<\/code> which takes a file and updates the preview image, title, and visibility in state. By setting the visibility to true, the preview will be rendered and displayed to the user.<\/p>\n
    With the hooks in place, we can create the components for our application. In the src<\/code> folder, create a new folder called components<\/code>.<\/p>\n
    Create DragAndDrop Component<\/h2>\n
    In the src\/components<\/code> directory, create a new file called DragAndDrop.js<\/code> and add the following to it:<\/p>\n
        import<\/span> { Upload } from<\/span> 'antd'<\/span>;\n    import<\/span> { PlusOutlined } from<\/span> '@ant-design\/icons'<\/span>;\n    import<\/span> useFilePreview from<\/span> '..\/hooks\/useFilePreview'<\/span>;\n    const<\/span> { Dragger } = Upload;\n    const<\/span> DragAndDrop = ({ addFile, removeFile }<\/span>) =><\/span> {\n      const<\/span> [handlePreview, previewContent] = useFilePreview();\n      const<\/span> beforeUploadHandler = (file<\/span>) =><\/span> {\n        addFile(file);\n        return<\/span> false<\/span>;\n      };\n      return<\/span> (\n        <><\/span>\n          <Dragger<\/span>\n            multiple<\/span>={true}<\/span>\n            onRemove<\/span>={removeFile}<\/span>\n            showUploadList<\/span>={true}<\/span>\n            listType<\/span>=\"picture-card\"<\/span>\n            beforeUpload<\/span>={beforeUploadHandler}<\/span>\n            onPreview<\/span>={handlePreview}<\/span>\n            accept<\/span>=\"image\/*\"<\/span>\n          ><\/span>\n            <p<\/span> className<\/span>=\"ant-upload-drag-icon\"<\/span>><\/span>\n              <PlusOutlined<\/span> \/><\/span>\n            <\/p<\/span>><\/span>\n            <p<\/span> className<\/span>=\"ant-upload-text\"<\/span>><\/span>\n              Click this area or drag files to upload\n            <\/p<\/span>><\/span>\n          <\/Dragger<\/span>><\/span>\n          {previewContent}\n        <\/><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> DragAndDrop;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    The DragAndDrop<\/code> component takes two props – addFile<\/code> and removeFile<\/code>. These will be used to update the selection of files in state. The functionality and JSX to render previews of uploaded images are retrieved from the useFilePreview<\/code> hook.<\/p>\n
    Finally, we return the JSX for the DragAndDrop<\/code> component. Antd provides a Dragger<\/code> component as part of the Upload<\/code> component. Because we want to upload multiple images at once, we pass true<\/code> for the multiple<\/code> prop. We also restrict the accepted file type to images using the accept<\/code> prop. The showUploadList<\/code> and list-type<\/code> props let the component know that we want to display the uploaded images as a list with picture-card<\/code>, causing the list to be displayed as a grid of thumbnail images. We also include the JSX for the image preview (retrieved from the useFilePreview<\/code> hook) under the Dragger<\/code> component.<\/p>\n
    Putting It All Together<\/h2>\n
    Update your src\/App.js<\/code> file to match the following:<\/p>\n
        import<\/span> '.\/App.css'<\/span>;\n    import<\/span> { Button, Card } from<\/span> 'antd'<\/span>;\n    import<\/span> DragAndDrop from<\/span> '.\/components\/DragAndDrop'<\/span>;\n    import<\/span> useFileSelection from<\/span> '.\/hooks\/useFileSelection'<\/span>;\n    const<\/span> App = ()<\/span> =><\/span> {\n      const<\/span> [addFile, removeFile] = useFileSelection();\n      return<\/span> (\n        <div<\/span> style<\/span>={{<\/span> margin:<\/span> '1<\/span>%' }}><\/span>\n          <Card<\/span>\n            style<\/span>={{<\/span> margin:<\/span> 'auto<\/span>', width:<\/span> '50<\/span>%' }}\n            actions<\/span>={[<\/span><Button<\/span> type<\/span>=\"primary\"<\/span>><\/span>Submit<\/Button<\/span>><\/span>]}\n          >\n            <DragAndDrop<\/span> addFile<\/span>={addFile}<\/span> removeFile<\/span>={removeFile}<\/span> \/><\/span>\n          <\/Card<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Run this command to spin up a local development server:<\/p>\n
        npm start\n<\/code><\/span><\/pre>\n
    By default, the application will be available at http:\/\/localhost:3000\/<\/a>. When you upload some images, the final result should look like the image below:<\/p>\n
    \"\"<\/p>\n
    Find the complete project here<\/a> on GitHub.<\/p>\n
    Conclusion<\/h2>\n
    In this article, we saw how to take advantage of Antd to create a visually appealing component that eases the process of uploading multiple images via the drag and drop functionality. In the next part of this series, we\u2019ll take things a step further by uploading multiple files to Cloudinary<\/a> at once.<\/p>\n
    Here are some resources you may find helpful:<\/h3>\n
    In the App component, we retrieve the addFile<\/code> and removeFile<\/code> functions from the useFileSelection<\/code> hook, which we pass as props to the DragAndDrop<\/code> component. We wrap the DragAndDrop<\/code> component in a Card<\/a> component. We also include a button<\/code> in the card, which will be used to submit (upload) the selected files.<\/p>\n
    The beforeUploadHandler<\/code> function takes a file and adds it to the selection in state. This function is passed as a prop to override the default behavior of the Upload<\/a> component when a file is added. By returning false<\/code>, we disable the default behavior of uploading the selected file to a provided URL.<\/p>\n
    The user should also have the option to close the preview. The hidePreview<\/code> function handles this by setting the visibility in state to false<\/code>, causing the preview to be hidden. Next, we declare the JSX for the preview. The preview is essentially an image wrapped in a Modal<\/a> component. Using the title and image stored in state, we update the relevant props for the preview component. Finally, we return an array containing the handlePreview<\/code> function and previewContent<\/code> constant.<\/p>\n