I'm using Angular 8. When i pick a image, i want to call my function in uploadByFile. Please help me slove it !!

[quana2k49]

[alikhiti]

I'm having the same issue. The function is not known inside uploadByFile.

[findelallc]

@alikhiti and @quana2k49

Define your own function or call a service which handles the actual file upload process to your backend. I just able to resolve by myself by putting a simple service file, understand the following code example - Plugin configuration

imageUpload: { class: ImageTool, config: { uploader: { uploadByFile(file) { const data = new FormData(); data.append('file', file); return UtilityService.createFileUpload(data).then((res) => { return { success: 1, file: { url: env.FILE_URL+res.data.data.PATH, }, }; }); } } } },

and the service your are calling, it must be a promise return (in my case header with token is must to pass through axios request, you may skip)

async createFileUpload (data) { return await axios.post(env.API_URL+'uploadFIle?_format=json', data,{ headers: { Authorization: Bearer ${JSON.parse(localStorage.getItem('userAuthDetails')).data.ACCESS_TOKEN} }, }).then(function (response) { response.flag = ((parseInt(response.data.code) === 201) && (response.data.status === "success")); return response; }).catch(function (error) { return error; }); },

Hope this helps .

[alikhiti]

Still return the service as undefined inside the plugin configuration

[findelallc]

Check once if your service file is correctly imported,I tried in React.

[Kamez]

imageUpload: { class: ImageTool, config: { uploader: { uploadByFile(file) { const data = new FormData(); data.append('file', file); return UtilityService.createFileUpload(data).then((res) => { return { success: 1, file: { url: env.FILE_URL+res.data.data.PATH, }, }; }); } } } },

when I use console.log(file) to see the parameter file I got the data but after use data.append('file', file); and console.log(data) I got nothing.

Do you know why this happen and how to fix it ?

[findelallc]

config: {
                            uploader: {
                                uploadByFile(file) {
                                    const data = new FormData();
                                    data.append('file', file);
                                    console.log(data);
                                    return UtilityService.createFileUpload(data).then((res) => {
                                        return {
                                            success: 1,
                                            file: {
                                                url: env.FILE_URL+res.data.data.PATH,
                                            }
                                        };
                                    });
                                }
                            }
                        }

In my case code looks like and it works, The data you are not able to see as it's a binary object which FormData() constructor convert to respective file object (in my case Blob) before sending to API and this which browser can't show. The API input must be a binary file - A blob object. Hope this helps.