С использованием Dropbox API для загрузки файлов. Мы должны использовать объект FormData using, поэтому мы просто применяем метод dropbox Javascript SDK следующим образом:
Допустим, у нас есть ввод здесь:
<input style={{ display: "none" }} multiple ref={fileUploader} onChange={uploadFiles} value={choosedFile} type="file"/>
скажем, объект FileList определяется как:
const uploadFiles = e => {
let dropBox = new Dropbox({ fetch: fetch, accessToken: dropbox_token });
let files = Array.from(e.target.files);
console.log(files)
if (files.length === 0) {
return;
}
setLoadingMessage("File sedang diunggah, mohon tetap menunggu")
handleOpenLoadingAlert()
const promises = files.map(file =>
dropBox.filesUpload({
path: path + "/" + file.name,
contents: file,
})
);
Promise.all(promises)
.then(responses => {
console.log("promiseAll response", responses);
setNewFileToRender(true)
setSuccessMessage("File berhasil diunggah")
// handle success alertnya di useEffect render files.
const files = responses.map(response => ({
...response,
".tag": "file"
}));
})
.catch(err => {
console.error(err);
});
};
Это то, что в документации Dropbox говорится о реализации загрузки с помощью Javascript SDK v2. Однако прямо сейчас мой вариант использования заключается в том, что у меня есть файлы, которые уже загружены с помощью Node.js Multer. И чего я хочу добиться, так это когда я выполняю действие (например, нажимаю кнопку), затем он извлекает файлы, загруженные в Multer, и хотел бы загрузить эти файлы в Dropbox.
На данный момент вот мой code:
axios
.get('/api/upload/file_tugas/', { params: { tugas_ids : tugas_ids}})
.then(res => {
console.log(res.data)
let files = res.data
console.log(files)
let dropbox = new Dropbox({ fetch: fetch, accessToken: dropbox_token });
const promises = files.map(file =>
dropbox.filesUpload({
path: "/TUGAS/" + file.filename,
contents: file
})
);
Promise
.all(promises)
.then(responses => {
const files = responses.map(response => ({
...response,
".tag": "file"
}));
})
.catch(err => {
console.log(err)
});
let fileList = Array.from(files);
})
Здесь res.data дает мне список файлов в метаданных. метаданные для GridFS следующие:
{
_id: 5f27b430c21b3c08e3b6a5cd,
length: 498807,
chunkSize: 261120,
uploadDate: 2020-08-03T06:52:32.732Z,
filename: 'How to use the CloudFormation stack template.docx',
md5: '80c65470cc2f081ee72bc8b3e75e7d49',
contentType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
}
Однако при загрузке в Dropbox метаданные здесь совсем другие.
0: File
lastModified: 1590670995125
lastModifiedDate: Thu May 28 2020 21:03:15 GMT+0800 (Singapore Standard Time) {}
name: "How to use the CloudFormation stack template.docx"
size: 498807
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
webkitRelativePath: ""
__proto__: File
length: 1
Из-за этого, когда я выполняю действие, чтобы переместите файлы в Dropbox, он успешно добавит папку с таким же именем файла. Но его не удается загрузить.
Кто-нибудь может помочь, в чем проблема? Спасибо, ваша помощь будет очень признательна :)