fris-fruitig / react-firebase-file-uploader

An image uploader for react that uploads images to your firebase storage
https://npm.im/react-firebase-file-uploader
166 stars 45 forks source link

I have an Uncaught exception in handleUploadSuccess #56

Open aelhirach opened 3 years ago

aelhirach commented 3 years ago

Uncaught (in promise) TypeError: Cannot read property 'name' of null at Observer.complete (index.js:150) at async.ts:27

Screenshot 2020-12-11 at 14 59 40

jasony4 commented 3 years ago

I am experiencing the same issue

qnxdev commented 3 years ago

Is it error getting metadata? Check this: #55

aelhirach commented 3 years ago

I found the source of the issue, it is located in handleUploadSuccess when this function is callback with a task.metadata.name. I fixed it by adding a metadata with name field.

okechukwu0127 commented 3 years ago

image

I cant say what the problem but i cant seem to make this bug fixed.

i have tried task.snapshot.ref and it did not work - it says undefined have also tried task.metadata.name and it did not work - it says undefined

have also tried adding this script

var name = storageRef.child(filenameToUse).getMetadata().then(function (metadata) {
return metadata.name;
});

and the .then is never triggered

running version - "react-firebase-file-uploader": "^2.4.2"

samirsd commented 3 years ago

having this issue as well

qnxdev commented 3 years ago

Refer #55 There is ein solution

johnzzon commented 3 years ago

I fixed it by adding a metadata with name field.

Can you explain how you did that?

EDIT: Nvm, solved it!

1stmuse commented 3 years ago

I fixed it by adding a metadata with name field.

Can you explain how you did that?

EDIT: Nvm, solved it!

how did you do it please

qnxdev commented 3 years ago

Different solutions work for different versions of firebase.

1stmuse commented 3 years ago

Different solutions work for different versions of firebase.

i did a stupid thing but got a solution, i passed metadata to the fileuploader, then on onuploadSuccess i used the second callback which is the task to get the filename because the first callback was just returning the name i specified in the metadata Screenshot from 2021-01-13 12-12-09

cmarabate commented 3 years ago

I have the same issue, was anybody able to fix this and can explain exactly how they did it? I tried everything suggested above with no luck.

toreal commented 3 years ago

Here is my version that work for me.

lib/index.js

task.on('state_changed', function (snapshot) { return onProgress && onProgress(Math.round(100 * snapshot.bytesTransferred / snapshot.totalBytes), task); }, function (error) { return onUploadError && onUploadError(error, task); }, function () { _this2.removeTask(task); return onUploadSuccess && onUploadSuccess(filenameToUse, task); }); _this2.uploadTasks.push(task); });

I change 'task.snapshot.metadata.name' to 'filenameToUse'

GustavoMelgarF commented 3 years ago

Here is my version that work for me.

lib/index.js

task.on('state_changed', function (snapshot) { return onProgress && onProgress(Math.round(100 * snapshot.bytesTransferred / snapshot.totalBytes), task); }, function (error) { return onUploadError && onUploadError(error, task); }, function () { _this2.removeTask(task); return onUploadSuccess && onUploadSuccess(filenameToUse, task); }); _this2.uploadTasks.push(task); });

I change 'task.snapshot.metadata.name' to 'filenameToUse'

Great, it works!!! Thanks