Error occurred when sending form data while uploading a file

Question

Error occurred when sending form data while uploading a file

Upon trying to upload a file using the formData.append(key, value);, an error message is displayed in the value section:

The argument of type 'unknown' cannot be assigned to a parameter of type 'string | Blob'. Type '{}' is missing essential properties such as size, type, arrayBuffer, slice, and more.

Code snippet

const uploadSubtitle = async e => {
            e.preventDefault();
            const file = fileInput.current.files[0];
            const res = await Axios.get(`/api/movies/${currentMovie.movieId}/subtitles?user=${user.id}`);
            const { url, fields } = res.data;
            const newUrl = `https://${url.split('/')[3]}.s3.amazonaws.com`;
            const formData = new FormData();
            const formArray = Object.entries({ ...fields, file });
            formArray.forEach(([key, value]) => {
                formData.append(key, value);
            });
           //... further code
    };


<form onSubmit={uploadSubtitle}>
   <input type='file' name='subtitle' ref={fileInput} accept='.srt' />
   <button onClick={uploadSubtitle}>Upload</button>
</form>

Extra information

console.log(file) output displays

File 
{name: "Trainspotting-English.srt", lastModified: 1587840529000, 
lastModifiedDate: Sun Apr 26 2020 00:18:49 GMT+0530 (India Standard Time), 
webkitRelativePath: "", size: 103040, …}

lastModified: 1587840529000 lastModifiedDate: Sun Apr 26 2020 00:18:49 GMT+0530 (India Standard Time) 
{} name: "Trainspotting-English.srt" size: 103040 
type: "application/x-subrip" webkitRelativePath: "" __proto__: File

console.log(typeof file) reveals that it is object

javascript typescript multipartform-data form-data

Answer 1

Answer №1

The crux of the issue lies in the enigmatic nature of res, which first appears in this context:

const res = await Axios.get(`/api/movies/${currentMovie.movieId}/subtitles?user=${user.id}`);

res is classified as any, causing the type of fields to also become any. Consequently, formArray ends up being categorized as [string, unknown][], leading to the presence of value as unknown, thus triggering an error.

To address this issue at its root, we can incorporate a generic type within the Axios.get method like this:

const res = await Axios.get<{url :string, fields: {[key:string]:string}}>(`/api/movies/xxx/subtitles?user=xxx`);

As a result, res will now assume the type

{url :string, fields: {[key:string]:string}}

, consequently defining fields with the type {[key:string]:string}.

Regrettably, the spread operator does not deduce the correct types. The expression {...fields, file} resolves to {file: File}, which isn't particularly beneficial. Therefore, let's provide guidance for formArray:

const formArray : [string, string|File][] = Object.entries({...fields, file});

Now, value will possess the type string|File.

Complete example:

function App() {

    let fileInput = useRef<HTMLInputElement>(null);

    const uploadSubtitle = async (e: React.FormEvent) => {
        e.preventDefault();
        const file = fileInput.current!.files![0];
        const res = await Axios.get<{ url: string, fields: { [key: string]: string } }>(`/api/movies/xxx/subtitles?user=xxx`);
        const {url, fields} = res.data;
        const formData = new FormData();
        const formArray: [string, string | File][] = Object.entries({...fields, file});
        formArray.forEach(([key, value]) => {
            formData.append(key, value);
        });
    };
    return <form onSubmit={uploadSubtitle}>
        <input type='file' name='subtitle' ref={fileInput} accept='.srt'/>
        <button type="submit">Upload</button>
    </form>
}

This intensive effort can be streamlined by modifying the problematic line to read as follows:

formData.append(key, value as Blob);

Incorporating as Blob into the code won't alter the compiled JS but will effectively silence the TypeScript compiler's complaints.

Answer 2

The crux of the issue lies in the enigmatic nature of res, which first appears in this context:

const res = await Axios.get(`/api/movies/${currentMovie.movieId}/subtitles?user=${user.id}`);

res is classified as any, causing the type of fields to also become any. Consequently, formArray ends up being categorized as [string, unknown][], leading to the presence of value as unknown, thus triggering an error.

To address this issue at its root, we can incorporate a generic type within the Axios.get method like this:

const res = await Axios.get<{url :string, fields: {[key:string]:string}}>(`/api/movies/xxx/subtitles?user=xxx`);

As a result, res will now assume the type

{url :string, fields: {[key:string]:string}}

, consequently defining fields with the type {[key:string]:string}.

Regrettably, the spread operator does not deduce the correct types. The expression {...fields, file} resolves to {file: File}, which isn't particularly beneficial. Therefore, let's provide guidance for formArray:

const formArray : [string, string|File][] = Object.entries({...fields, file});

Now, value will possess the type string|File.

Complete example:

function App() {

    let fileInput = useRef<HTMLInputElement>(null);

    const uploadSubtitle = async (e: React.FormEvent) => {
        e.preventDefault();
        const file = fileInput.current!.files![0];
        const res = await Axios.get<{ url: string, fields: { [key: string]: string } }>(`/api/movies/xxx/subtitles?user=xxx`);
        const {url, fields} = res.data;
        const formData = new FormData();
        const formArray: [string, string | File][] = Object.entries({...fields, file});
        formArray.forEach(([key, value]) => {
            formData.append(key, value);
        });
    };
    return <form onSubmit={uploadSubtitle}>
        <input type='file' name='subtitle' ref={fileInput} accept='.srt'/>
        <button type="submit">Upload</button>
    </form>
}

This intensive effort can be streamlined by modifying the problematic line to read as follows:

formData.append(key, value as Blob);

Incorporating as Blob into the code won't alter the compiled JS but will effectively silence the TypeScript compiler's complaints.

Answer 3

Answer №2

My initial File data structure was causing an error: "Argument of type 'FileData' is not assignable to parameter of type String or Blob"

To resolve this issue, I made the following adjustments:

I updated the code to use form.append('file', value as {} as Blob); This change successfully stopped TypeScript from raising errors.

Answer 4

My initial File data structure was causing an error: "Argument of type 'FileData' is not assignable to parameter of type String or Blob"

To resolve this issue, I made the following adjustments:

I updated the code to use form.append('file', value as {} as Blob); This change successfully stopped TypeScript from raising errors.

Error occurred when sending form data while uploading a file

Answer №1

Answer №2

Similar questions

Record the success or failure of a Protractor test case to generate customized reports

Exploring the possibilities of reading and writing data in localStorage?

Tips for navigating the HTML DOM without using window.scrollBy(x, y) (specifically for scrolling within an element)

Customize Your AJAX POST URL with Radio Buttons - A Step-by-Step Guide

Troubleshooting issues with a Node.js application on Azure App Service

When querying the model, the result may be undefined

Unable to execute ajax on dom ready in Internet Explorer 9

Obtain a transformed mesh that has been displaced using a displacementMap within three.js

Giving identification to a pair of elements located within the same column

The softAssert method is not available when trying to implement soft assertions within a TypeScript-based Protractor framework

Apply a specific image layout once the drop event occurs

The manager encountered an issue while querying for "Photo" data: EntityMetadataNotFoundError - no metadata could be found

Image Blob increases over 50 times its original size when uploaded

Guide on converting this function into a computed property within Vue

The transfer of variables from AJAX to PHP is not working

Unable to access a nested JSON object that has a repeated name

Iterate through the JSON response and send it back to Jquery

What is the process for incorporating an external script into my Vue methods?

Steps for generating a time selection dropdown menu

How to retrieve the ID of a parent sibling using jQuery DataTables