Uploading files

Uploading process overview

The file upload process flow is outlined as a series of steps below:

Select file

The user initiates file upload by selecting a file. The file selection can be done using HTML5 Form, React Component, etc. It depends on the developer's implementation of file uploading.

We can use a simple React form for simple file selection input:

function FileUpload() {
 
    const handleFileChange =async (event) => {
        const file = event.target.files[0]
    }
 
    return (
        <div>
            <h1>Upload a File</h1>
            <input type="file" onChange={handleFileChange} accept="image/jpeg, image/png" />
        </div>
    )
}

Generates a signed URL

The createFileUpload() API will return a signed URL. This URL is needed for uploading the file later.

const handleFileChange = async (event) => {
	const file = event.target.files[0]
 
	try {
		const response = await roqBrowserClient.roqPlatform.createFileUpload({
			data: {
				name: file.name,
				contentType: file.type,
				fileCategory: 'USER_FILES',
			}
		})
 
		const { uploadUrl } = response.createFileUploadV2
 
	} catch (err) {
		console.log(err)
	}
}

Upload file using signed URL

The file will be uploaded using the provided signed URL, which means it is uploaded directly from the user's browser to the object storage without sending it through your backend.

Let's take an example, uploading a file using axios:

const { uploadUrl, formFields, id } = response.createFileUploadV2
const formData = new FormData()
 
for (let [key, value] of Object.entries(formFields || {})) {
    formData.append(key, value);
}
 
formData.append('file', file)
 
try {
    const response = await axios.post(uploadUrl, formData, {
        headers: {
            'content-type': null,
        },
    });
 
    if (response.status >= 200 && response.status < 300) {
 
        // Add set file status here
		await roqBrowserClient.roqPlatform.updateFile({
		    data: {
			    fileId: id,
				status: FileStatusEnum.Ready, 
			}
		})
        
        console.log('Upload successful!', response.data);
    } else {
        console.error('Server responded with an error', response.data);
    }
} catch (error) {
    console.error('Error uploading file:', error);
}

The critical thing to note here is that the formFields returned by the createFileUpload() should also be passed to formData.

for (let [key, value] of Object.entries(formFields || {})) {
    formData.append(key, value);
}

Set the file status

Set the status of the file using the updateFile() API. When the upload is finished, you need to set the upload status. This is required because the file is uploaded directly to the object storage, bypassing the ROQ Platform.

await roqBrowserClient.roqPlatform.updateFile({
    data: {
        fileId: id,
        status: FileStatusEnum.Ready,
    }
})

File upload completed

With the completed file upload then we can check the file using the file() method.

const filebyId =async () => {
	const myfile = await roqBrowserClient.roqPlatform.file({
		id: "dd1f3ac5-2951-460e-add3-d3ef9516d694",
		withCreatedByUser: true
	})
}

Uploading files in Next.js

Next.js is one of the many JavaScript frameworks that is supported by ROQ SDK for BaaS. For details on how to perform file uploads using the FileUpload component from @roq/ui-react, visit add file uploads documentation section.

API Fetch Files