React Js File Upload size Limit Validation

    const { useState } = React;

    function App() {

      const [fileSizeError, setFileSizeError] = React.useState(null);

      const [fileContent, setFileContent] = React.useState(null);

      const [imageSizeKB, setImageSizeKB] = React.useState(0); // Add this state variable

      const maxFileSize = 50000; // 50KB

      const minFileSize = 1024; // 1KB (you can adjust this as needed)

​

      const handleFileUpload = (event) => {

        const file = event.target.files[0];

        if (!file) return; // No file selected

​

        if (file.size > maxFileSize || file.size < minFileSize) {

          setFileSizeError(

            file.size > maxFileSize

              ? `File size exceeded the limit of ${maxFileSize / 1000} KB`

              : `File size is smaller than the minimum limit of ${minFileSize / 1000} KB`

          );

          setFileContent(null);

          setImageSizeKB(0); // Reset image size

          return; // Do not process the file if it exceeds the size limit or is too small

        }

​

        const reader = new FileReader();

        reader.onloadend = () => {

          setFileSizeError(null);

          setFileContent(reader.result); // Store the file content

          setImageSizeKB(file.size / 1024); // Calculate and store image size in KB

        };

        reader.readAsDataURL(file); // Read file as a data URL (image)

      };

​

      return (

        <div className="container">

          <h3 className="title">React Js File Upload Size Limit Validation</h3>

          <input type="file" onChange={handleFileUpload} className="file-input" />

          {fileSizeError && <p className="error">{fileSizeError}</p>}

          {fileContent && (

            <div>

              <p className="uploaded-text">Uploaded Image:</p>

              <img src={fileContent} alt="Uploaded" className="uploaded-image" />

              <p className="image-size">Image Size: {imageSizeKB.toFixed(2)} KB</p>

            </div>

          )}

        </div>

​

      );

    }

​

    ReactDOM.render(<App />, document.getElementById("app"));

  </script>

        const { useState } = React;

​

        function App() {

            const MAX_FILE_SIZE_MB = 5;

            const [errorMessage, setErrorMessage] = useState('');

​

            const isValidFileType = (file) => {

                return file.name.endsWith('.csv');

            };

​

            const isValidFileSize = (file) => {

                return file.size <= MAX_FILE_SIZE_MB * 1024 * 1024;

            };

​

            const handleFileChange = (event) => {

                const selectedFile = event.target.files[0];

​

                if (selectedFile) {

                    if (isValidFileType(selectedFile) && isValidFileSize(selectedFile)) {

                        setErrorMessage(''); // Clear any previous error message

                    } else {

                        setErrorMessage('Invalid file. Please check file type and size.');

                    }

                }

            };

​

            return (

                <div className="container">

                    <h1>CSV File Uploader</h1>

                    <input type="file" onChange={handleFileChange} />

                    <p style={{ color: 'red' }}>{errorMessage}</p>

                </div>

            );

        }

​

        ReactDOM.render(<App />, document.getElementById("app"));

    </script>

        const { useState } = React;

        function App() {

​

            const handleFileChange = (event) => {

                const file = event.target.files[0];

​

                // File type validation

                if (!file.type.startsWith('image/')) {

                    alert('Please upload only image files.');

                    return;

                }

​

                // File size validation (in bytes)

                const maxSize = 5 * 1024 ; 

                if (file.size > maxSize) {

                    alert('File size exceeds the limit (5 KB).');

                    return;

                }

​

            };

​

            return (

                <div className="container">

                    <h3 className="title">React Js File Upload Size Limit Validation</h3>

                    <input type="file" onChange={handleFileChange} />

                </div>

​

            );

        }

​

        ReactDOM.render(<App />, document.getElementById("app"));

    </script>