I need help uploading files using code and adding the uploaded file to a collection

Ask the community
,
1

I’m trying to make a page where the user can upload a file to a database using code, the reason I’m not just doing this with a dataset is because I need it to save certain fields with different information based on other user input.

So I tried the code below, but “fileUrl” doesn’t return the actual url of the file, it returns the type, name and size of the file, so how do I get the actual file url?

Here is the code I used:
`
function uploadFileType1() {

let fileUrl;

$w("#uploadButton")
	.uploadFiles()
	.then((uploadedFile) => {
		fileUrl = uploadedFile[0].fileUrl;
		console.log(fileUrl);
	})

	let newItem = {
		title : $w("#nameInput").value,
		icon : "https://static.wixstatic.com/media/ebb597_b5ee06ff2f35418faf2d058e94f9dc21~mv2.png",
		type : "file",
		content : fileUrl,
	}
	wixData
		.insert("collection1", newItem)
		.then((item) => {
			console.log(item);
		})
		.catch((err) => {
			console.log(err);
		})

}
`

(I also tried using the depracted method “startUpload()”, but I got the same results).

Thanks,

2

Hi,
first I suggest you to call the uploadFiles() with an async/await method

add async to the method declaration:
$w('#button').onClick(async (event) => {...

then call uploadFiles()

const file = await $w("#uploadButton").uploadFiles();
const fileUrl = file[0].fileUrl;
console.log(fileUrl);

what does console.log(fileUrl) prints? I expect something like
wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120

be sure that in your collection1 the content field is created with type image.

3

Thanks Ribbon tor your respons,
I do indeed get this as the URL, but when i insert an item with that URL as the content field the actual field remains empty, and the field is set approprietly for the file type.

By the way when i go to wix media file manager and download the URL of the file i get a normal URL like this: https://video.wixstatic.com/video/ebb597_21424b67cf304bdeb9956976c8520022/720p/mp4/file.mp4

Thanks,
Aaron.

4

the url is empty becausewixData.insertruns before the Promise of uploadFiles() has finished.

You should use async/await or put all the code inside your .uploadFiles().then()

let fileUrl;

$w("#uploadButton")
	.uploadFiles()
	.then((uploadedFile) => {
		fileUrl = uploadedFile[0].fileUrl;
		console.log(fileUrl);

		let newItem = {
			title : $w("#nameInput").value,
			icon : "https://static.wixstatic.com/media/ebb597_b5ee06ff2f35418faf2d058e94f9dc21~mv2.png",
			type : "file",
			content : fileUrl,
		}
		wixData
			.insert("collection1", newItem)
			.then((item) => {
				console.log(item);
			})
			.catch((err) => {
				console.log(err);
			})
	})
5

If you need to save other information based on user input then you can use onBeforeSave and setFieldValues ….

This would allow you to use a dataset.

It would be much simpler than trying to code an upload function for that 1 upload element.

Try these resources….