react-dropzone

Unable to upload images with React dropzone

由 三世轮回 提交于 2021-02-11 13:18:12
问题 I am using react-dropzone to get files on my react application and i am trying to upload these multiple images using axios. Backend is in mongo+express. But, for some reasons, image is not being received at the backend. MY react code is: const data = new FormData(); data.append("title", entry.title); entry.images.forEach((image, index) => { console.log(image) /*This prints out File ​​ lastModified: 1599303132607 ​​ name: "name.jpg" ​​ path: "name.jpg" ​​ size: 41142 ​​ type: "image/jpeg" ​​

How to implement drag and drop behaviour in React

由 感情迁移 提交于 2020-01-04 04:10:10
问题 I'm trying to implement drag and drop behaviour using React and react-beautiful-dnd library. I want to chose some images using react-dropzone library and after choosing images I show thumbnails on the right side of the screen and after that I want to be able to drag one of those thumbnails to the left side and drop it to one of those containers. My code is as follows: import React, { Component } from "react"; import ReactDOM from "react-dom"; import { DragDropContext, Droppable, Draggable }

How to empty the dropzone modal after submitted in ReactJS?

由 萝らか妹 提交于 2019-12-13 08:40:50
问题 I was wondering how can I empty the files inside on dropzone after it is already saved in the server and the database? My problem is when I submitted it maintain the files on the dropzone and even on the modal closed. I wish I can give a code about emptying the dropzone but I don't have any idea so instead I will leave the code of dropzone and onsubmit. The code for onsbumit onSubmit() { debugger form.Status=0; form.isActive=true; return(form.Key > 0 ? this.creater : this.creater).call(this,

How to use react-s3-uploader with reactjs?

由 被刻印的时光 ゝ 提交于 2019-12-13 03:57:02
问题 I am new to reactjs want to upload image on s3, But don't know how it would work... And don't know where will I get the image path come from aws (in which function)? Here is my react code import ApiClient from './ApiClient'; // where it comes from? function getSignedUrl(file, callback) { const client = new ApiClient(); const params = { objectName: file.name, contentType: file.type }; client.get('/my/signing/server', { params }) // what's that url? .then(data => { callback(data); // what

How can I read file content with react-dropzone?

由 六眼飞鱼酱① 提交于 2019-12-10 19:56:50
问题 I'm trying to learn more about working with files for an upcoming project. Is there a way with react-dropzone that I can run a function when onDrop happens to change the contents of the files I'm uploading? For example, if I'm uploading a word doc that says "Hi everybody" how would I change the content to "Hi Dr. Nick"? I've tried just accessing the data by using the filereader api after before attempting to make the changes. I tried using filereader right after the opening curly bracket of

Uploading multiple files with Fetch and FormData APIs

由 有些话、适合烂在心里 提交于 2019-12-10 03:47:00
问题 I'm trying to use the native Fetch and FormData APIs to upload multiple files at once to the server but I can't for the life of me get it to work. Here's what I've got: // acceptedFiles are File objects coming from `react-dropzone`. function handleSubmit(acceptedFiles) { const data = new FormData(); for (const file of acceptedFiles) { data.append('files', file, file.name); } return fetch('https://example.com/api/upload', { method: 'POST', body: data, }); } But what my Rails server receives is

Progress bar for superagent file upload

由 北城余情 提交于 2019-12-08 06:02:23
问题 I am using the following codes to upload files. File would be sent through superagent in blob format, convert it to dataURI when reaches server and save into AWS S3. files.forEach((file) => { superagent.post('http://localhost:3030/uploads') .attach('file', file) .on('progress', e => { console.log('Percentage done: ', e); }) .end((err, res) => { // console.log(err); console.log(res); }); }); File upload works but the progress bar is not populated correctly. As per the screenshot, you can see

Progress bar for superagent file upload

由 元气小坏坏 提交于 2019-12-06 14:41:45
I am using the following codes to upload files. File would be sent through superagent in blob format, convert it to dataURI when reaches server and save into AWS S3. files.forEach((file) => { superagent.post('http://localhost:3030/uploads') .attach('file', file) .on('progress', e => { console.log('Percentage done: ', e); }) .end((err, res) => { // console.log(err); console.log(res); }); }); File upload works but the progress bar is not populated correctly. As per the screenshot, you can see that the ProgressEvent upload percentage ended very fast at 100%, due to both frontend and backend

Uploading multiple files with Fetch and FormData APIs

由 北战南征 提交于 2019-12-05 05:37:13
I'm trying to use the native Fetch and FormData APIs to upload multiple files at once to the server but I can't for the life of me get it to work. Here's what I've got: // acceptedFiles are File objects coming from `react-dropzone`. function handleSubmit(acceptedFiles) { const data = new FormData(); for (const file of acceptedFiles) { data.append('files', file, file.name); } return fetch('https://example.com/api/upload', { method: 'POST', body: data, }); } But what my Rails server receives is this: Parameters: {"files"=># <ActionDispatch::Http::UploadedFile:0x00007feb347becc0 @tempfile=#
订阅 react-dropzone