Fails to process large files

Question

I am building a simple web that allows creating a hash from the uploaded file. When I run my code locally it works fine, however, it fails to process large files after it has been deployed to a server. The idea is to restrict users from uploading large files (no more than 10 MB), and if the file is larger than 10 MB, then throw a pop-up alert. Am I supposed to check the file size inside my Component.js, or should it be handled inside the action.js?

FileSelectorComponent.js

const mapDispatchToProps = (dispatch) => {
return {
    onFileChange: event => dispatch(hash_file(document.getElementById("hash_type_file").options[document.getElementById("hash_type_file").selectedIndex].value, event.target.files[0]))
}}

HashFileAction.js

 if (hash_type === 'md5') {
        console.log(file);
        reader.onloadend = function () {
            text = (reader.result);
            hash_value = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));
            type = hash_type.toUpperCase() + " HASH: ";
            hash_obj = action_dispatch_builder(type, hash_value.toString(), hash_obj, file);
            dispatch(setHashFile(hash_obj));
        }

        if( file !== undefined ){
            reader.readAsBinaryString(file);
        }

    }
function action_dispatch_builder(type, hash_value, hash_obj, file) {
hash_obj["type"] = type;
hash_obj["hash_value"] = hash_value;
hash_obj["file_info"]["name"] = file["name"];
hash_obj["file_info"]["size"] = file["size"];
hash_obj["file_info"]["type"] = file["type"];
hash_obj["file_info"]["lastModifiedDate"] = file["lastModifiedDate"];
return hash_obj;}

Reducer.js

export const updateFile = (state = initialState, action) => {
switch (action.type) {
    case "UPLOAD":
        if(action.payload["file_info"]["size"] < 10000000){
            return {
                ...state,
                hash_type: action.payload["type"],
                hash_value: action.payload["hash_value"],
                info_vis: true,
                valid_size: true,
                file_info: {
                    name: action.payload["file_info"]["name"],
                    size: action.payload["file_info"]["size"],
                    type: action.payload["file_info"]["type"],
                    lastModifiedDate: action.payload["file_info"]["lastModifiedDate"]
                }
            }
        } else{
            console.log("HERE")
            return {
                ...state,
                info_vis: true
            }
             
        }
    default:
        return initialState;
}}

user_9778659 · Answer

fileChangedHandler = (event) => {
    let file_size = event.target.files[0].size;
    // clear text when file is uploaded
    document.getElementById("hash_text").value = "";
    // check file size
    if(file_size > 10485760){
        return alert("File is too large!");      
    }else{
        this.props.onFileChange(event)
    }
};

I added this code to my component and it seems to fix my issue.

Fails to process large files

1 Answers