Scribd
Upload
2 views3 pages

Project Documentation

The document contains code for a React file upload component that allows users to select and upload files to a backend server using Axios. The backend server, built with Express and Multer, handles file uploads and stores them in AWS S3, ensuring that duplicate files are not uploaded. It also includes error handling for both the frontend and backend processes.

Uploaded by

Dikshit Narayan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views3 pages

Project Documentation

The document contains code for a React file upload component that allows users to select and upload files to a backend server using Axios. The backend server, built with Express and Multer, handles file uploads and stores them in AWS S3, ensuring that duplicate files are not uploaded. It also includes error handling for both the frontend and backend processes.

Uploaded by

Dikshit Narayan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Project Documentation

React Code (File Upload Component)

import React, { useState } from 'react';


import axios from 'axios';

const FileUpload = () => {


const [file, setFile] = useState(null);
const [message, setMessage] = useState('');
const [fileURL, setFileURL] = useState('');

const handleFileChange = (e) => {


setFile([Link][0]);
};

const handleUpload = async () => {


if (!file) {
setMessage('Please select a file to upload');
return;
}

const formData = new FormData();


[Link]('file', file);

try {
const response = await [Link]('[Link] formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
setMessage([Link]);
setFileURL([Link]);
} catch (error) {
setMessage([Link]?.data?.message || 'Error uploading file');
}
};

return (
<div>
<input type="file" onChange={handleFileChange} />
<button onClick={handleUpload}>Upload</button>
{message && <p>{message}</p>}
{fileURL && (
<p>
File URL: <a href={fileURL} target="_blank" rel="noopener
noreferrer">{fileURL}</a>
</p>
)}
</div>
);
};

export default FileUpload;

Backend Server Code (Express with Multer & AWS S3)

const express = require('express');


const multer = require('multer');
const AWS = require('aws-sdk');
const cors = require('cors');
const dotenv = require('dotenv');

[Link]();

const app = express();


const port = [Link] || 5000;

// Enable CORS for all routes


[Link](cors());

// Set up multer for file uploads


const storage = [Link]();
const upload = multer({ storage: storage });

// Configure AWS S3
const s3 = new AWS.S3({
accessKeyId: [Link].AWS_ACCESS_KEY_ID,
secretAccessKey: [Link].AWS_SECRET_ACCESS_KEY,
region: [Link].AWS_REGION,
});
// In-memory store for file hashes
const files = new Map();

[Link]('/upload', [Link]('file'), (req, res) => {


const file = [Link];

if (!file) {
return [Link](400).json({ message: 'No file uploaded' });
}

const fileBuffer = [Link];


const fileHash = require('crypto').createHash('sha256').update(fileBuffer).digest('hex');

if ([Link](fileHash)) {
return [Link](400).json({ message: 'File already exists' });
}

const params = {
Bucket: [Link].AWS_BUCKET_NAME,
Key: [Link],
Body: fileBuffer,
ContentType: [Link],
};

[Link](params, (error, data) => {


if (error) {
return [Link](500).json({ message: 'Error uploading file', error: [Link] });
}

[Link](fileHash, [Link]);
return [Link](200).json({ message: 'File uploaded successfully', location: [Link]
});
});
});

[Link](port, () => {
[Link](`Server running on port ${port}`);
});

You might also like