Amplify Storage S3 uploadData function filename issue

0

I added storage to my Amplify React App. Read the AWS Documentation https://docs.amplify.aws/react/build-a-backend/storage/upload-files/ The uploadData function does upload the file for me but the filename is reported in the AWS S3 Console as "undefined". I can tell its the right file based on file size, ie if I upload a different file the filesize updates to match, however again the file is called "undefined"

Here is the code

	import React from 'react';
	import { uploadData } from 'aws-amplify/storage';

	const StorageTest = () => {
	  const [file, setFile] = React.useState();

	  const handleChange = (event) => {
		setFile(event.target.files[0]);
	  };

	  const handleUpload = async () => {
		if (file) {
		  try {
			const result = await uploadData({
			  path: `public/docs/${file.name}`,
			  data: file,
			});

			console.log('File uploaded successfully', result);
		  } catch (error) {
			console.error('Error uploading file', error);
		  }
		} else {
		  console.error('No file selected for upload');
		}
	  };

	  return (
		<div>
		  <input type="file" onChange={handleChange} />
		  <button onClick={handleUpload}>Upload</button>
		</div>
	  );
	}

	export default StorageTest;
gefragt vor 2 Monaten554 Aufrufe
3 Antworten
0

The main reason why file name could be undefined is because the action may be asynchronous, meaning at the time you perform the upload the react state doesn’t have the information.

Id suggest to try use a form onSubmit event and see if that helps.

profile picture
EXPERTE
beantwortet vor 2 Monaten
profile picture
EXPERTE
überprüft vor 18 Tagen
0

Thanks for the reply I updated the code to use a Form's onSubmit but the filename is still "undefined" after the upload. Both versions of the code wait for the asynchronous operation. but I'm obviously missing something. Maybe I need to wait for a specific state ?

Here is the updated code with Form submit

	import React from 'react';
	import { uploadData } from 'aws-amplify/storage';

	const StorageTest = () => {
	  const [file, setFile] = React.useState();

	  const handleChange = (event) => {
		const selectedFile = event.target.files[0];
		console.log('Selected file:', selectedFile);
		setFile(selectedFile);
	  };

	  const handleSubmit = async (event) => {
		event.preventDefault(); // Prevent the default form submission behavior
		if (file) {
		  try {
			console.log('File name:', file.name);
			const result = await uploadData({
			  path: `public/docs/${file.name}`,
			  data: file,
			});
			console.log('File uploaded successfully', result);
		  } catch (error) {
			console.error('Error uploading file', error);
		  }
		} else {
		  console.error('No file selected for upload');
		}
	  };

	  return (
		<form onSubmit={handleSubmit}>
		  <input type="file" onChange={handleChange} />
		  <button type="submit">Upload</button>
		</form>
	  );
	};

	export default StorageTest;
beantwortet vor 2 Monaten
0

Ok I got it to work at last. I back tracked to the original code from the AWS Documentation Then replaced "path" with "key" in the uploadData function With this change the uploadData function works. The file is placed in a public\docs*.* folder, Here is the revised code.

	import React from 'react';
	import { uploadData } from 'aws-amplify/storage';

	const StorageTest = () => {
	  const [file, setFile] = React.useState();

	  const handleChange = (event) => {
		setFile(event.target.files[0]);
	  };

	  const handleUpload = async () => {
		if (file) {
		  try {
		const filepath = `docs/${file.name}`;
			const result = await uploadData({
			  //path: filepath,
			  key: filepath,
			  data: file
			});

			console.log('File uploaded successfully', result);
		  } catch (error) {
			console.error('Error uploading file', error);
		  }
		} else {
		  console.error('No file selected for upload');
		}
	  };

	  return (
		<div>
		  <input type="file" onChange={handleChange} />
		  <button onClick={handleUpload}>Upload</button>
		</div>
	  );
	}

	export default StorageTest;
beantwortet vor 2 Monaten
profile picture
EXPERTE
überprüft vor 2 Monaten

Du bist nicht angemeldet. Anmelden um eine Antwort zu veröffentlichen.

Eine gute Antwort beantwortet die Frage klar, gibt konstruktives Feedback und fördert die berufliche Weiterentwicklung des Fragenstellers.

Richtlinien für die Beantwortung von Fragen