What do I want to achieve?
I’m trying to know the static URL of a file that a user has uploaded. I’m using uploadFiles()
function to allow users upload a pdf document, then I’m trying to retrieve the URL that MediaManager created for that File.
For that, I’m using back end functions getFileInfo and getFileUrl, but I’m receiving nothing as response. I checked that uploadFiles() function is running as expected and it is, I have the uploaded files in Visitor Uploads
What have you already tried:
$w.onReady(function () {
$w('#uploadButton1').fileType = "Document"
$w('#button79').onClick(() =>{
$w('#uploadButton1').startUpload()
.then( (uploadedFile) => {
let url = uploadedFile.url;
let urlInfo = fileInfo(url)
console.log(url)
return Promise.all(urlInfo)
} )
.catch( (uploadError) => {
let errCode = uploadError.errorCode; // 7751
let errDesc = uploadError.errorDescription; // "Error description"
console.log(errCode)
console.log(errDesc)
});
})
$w("#upload").fileType = "Document"; // Site visitor can choose an image
$w('#uploadFile').onClick( () => {
console.log($w('#upload').value)
if ($w("#upload").value.length > 0) { // Site visitor chose a file
$w("#upload").uploadFiles()
.then( (uploadedFiles) => {
uploadedFiles.forEach(uploadedFile => {
let fileUrl = uploadedFile.fileUrl
return fileInfo(fileUrl)
})
console.log("Upload successful.");
} )
.catch( (uploadError) => {
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
} );
}
else { // Site visitor clicked button but didn't choose a file
console.log("Please choose a file to upload.")
}
} );
import { mediaManager } from 'wix-media-backend';
export async function fileInfo(file) {
try {
console.log("Before calling mediaManager.getFileUrl");
const result = await mediaManager.getFileInfo(file);
console.log(result);
} catch (error) {
console.error("Error getting file info:", error);
}
}
I do not see the IMPORTS of your BACKEND-FUNCTIONS on your FRONTEND.
Where are the IMPORTS ? Did you show the whole related code ?
This part of code is surely running on your backend-code? Or did you place that part also on your FRONTEND, like shown in your example? If so → it is wrong!
Did you create a JSW-Backend-file already ?
Seems like you are mixing up something, or did not show complete code.
IMPORTS are always on the very top of your page’s code (no matter if frontend or backend-coding)
Hi! Yes I’m importing my functions from the back-end. Srry if I didn’t separate the code in this example. And as you mentioned, this is the whole related code
//############ MISSING IMPORT OF THE fileInfo-FUNCTION FROM THE BACKEND HERE !!!!!! ##############################
//import { fileInfo } from 'backend/YOUR_JSW_MODULE_NAME_HERE'; //--> in this example xyz.jsw;
import { fileInfo } from 'backend/xyz.jsw'; //<--- now you have imported your exported function to your frontend and are able to use it!!!
$w.onReady(()=> {
$w('#uploadButton1').fileType = "Document";
$w('#button79').onClick(() => {console.log('clicked');
$w('#uploadButton1').startUpload()
.then(async(uploadedFile) => {console.log("UPLOADED-FILE: ", uploadedFile);
let url = uploadedFile.url; console.log("URL :", url)
let urlInfo = await fileInfo(url); console.log("URL-INFO: ", urlInfo);
})
.catch((uploadError)=> {
let errCode = uploadError.errorCode; console.log("Error-Code: ", errCode)
let errDesc = uploadError.errorDescription; console.log("Error-Descrpt: " ,errDesc);
});
});
$w("#upload").fileType = "Document";
$w('#uploadFile').onClick(()=> {console.log($w('#upload').value);
if ($w("#upload").value.length > 0) { // Site visitor chose a file
$w("#upload").uploadFiles()
.then((uploadedFiles)=> {
uploadedFiles.forEach(async(uploadedFile)=> {console.log("UPLOADED-FILE: ", uploadedFile);
let fileUrl = uploadedFile.fileUrl; console.log("FILE-URL :", fileUrl)
let urlInfo = await fileInfo(fileUrl); console.log("URL-INFO: ", urlInfo);
});
console.log("Upload successful.");
})
.catch((uploadError)=> {
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
} else {console.log("Please choose a file to upload.");}
});
}); //<---- was missing here! ! !!
//-------------- [ BACKEND-CODE ]------------------
//This code-part should be inside an JSW-Backend-module in this example ---> xyz.jsw !!!!
import { mediaManager } from 'wix-media-backend';
export async function fileInfo(file) {
try {
const result = await mediaManager.getFileInfo(file);
return result;
} catch (error) {
console.error("Error getting file info:", error);
}
}
Go through all your code and check it for ERRORS and SYNTAX-ERRORS first !
Do you use the CONSOLE ? Add more CONSOLE-LOGS to your code → and inspect step by step process. Where does the code stops?
Code still not looks perfectly! I did not test it, so it still could have some bugs.
Use the logs, it will help you out !
I expressed myself incorrectly Russina-dima! So sorry! As you pointed in my original code I have already imported my back end module / function and the code stills not working! I have a console .loge inside both functions and when I use getFileInfo(file) the log is undefined, and using getFileUrl(file) instead getFileInfo(file) the log don’t exists.
Always remember that the file is getting uploaded correctly into my MediaManager. The code never stops, just I’m not getting the expected retrieved info
Here there are both codes! I changed the getFileInfo() and getFileUrl() functions to listFolders() folders function, in order to get: Folder’s ID and then retrieve the files url’s and information. I got inspired from another forum, but i’m not getting any console log. The files are uploading correctly
On Frontend → maybe improve first line → import {myListFoldersFunction} from ‘backend/app.jsw’
And why you are calling → myListFoldersFunction in the second line of your code , when your page is not even ready at that moment ?
You are not using ASYNCHRONOUS-FUNCTIONS on your frontend → to await for the results from BACKEND! → which i already have shown in my first code-correction.
That means, you are not waiting for results.
This maybe was not a good advice—> —> then ----> (null, null, null ) ??? <— already tried it out ?
You are a genius! It worked perfectly! Thanks very much. Having this open forum, I would like to ask you: Do you know how can I upload files into a collection?
