Reading uploaded text file

I am trying to read the content of a user uploaded text file using the upload button and wix-fetch. However I receive a “TypeError: Load failed” error. Is this not possible on the frontend?

Here is my code:

if ( $w ( “#uploadButton1” ). value . length > 0 ) {
$w ( “#uploadButton1” ). uploadFiles ()
. then ( ( uploadedFiles ) => {
fetch ( uploadedFiles [ 0 ]. fileUrl )
. then ( httpResponse => httpResponse . text ())
. then ( text => console . log ( text ))
. catch ( error => console . log ( error ));
})
. catch ( ( uploadError ) => {

    console . log ( "File upload error: "  +  uploadError . errorCode ); 
    console . log ( uploadError . errorDescription ); 
  }); 
}  
**else**  { 
    console . log ( "Please choose a file to upload." ); 
} 

Any ideas would be greatly appreciated. Additionally, is there a way to read the text file line by line?

Thank you,
Donny

Hello! So in your fetch you are using the uploaded url which is causing your problems. You will need to do a few things…

Pass the uploaded url to a backend function to get a proper url for the fetch.
See getFileUrl

import { mediaManager } from 'wix-media-backend';

export async function getFileUrl(fileUrl) {
  return mediaManager.getFileUrl(fileUrl);
}

This returns a promise that will give you a url you can then use in your fetch. When your httpResponse comes back ok, you can then get the text from the response:

httpResponse.text().then((result) => {
console.log(result)
})

Hi,

Thank you very much for your response. That solved my problem. It is a little confusing that the fileURL returned by the upload button is not the same fileURL returned by the mediaManager.

Yes, I can see how that would be confusing since they are named the same but the structure/use is different. I am glad it is working for you now though!