file input is dynamically added to DOM, not rendered

Author: benjiwheeler

src/lib/sb-file-uploader-hoc.jsx

@@ -43,47 +43,48 @@ const SBFileUploaderHOC = function (WrappedComponent) {
         constructor (props) {
             super(props);
             bindAll(this, [
+                'createFileObjects',
                 'getProjectTitleFromFilename',
+                'handleFinishedLoadingUpload',
                 'handleStartSelectingFileUpload',
-                'setFileInput',
                 'handleChange',
                 'onload',
-                'resetFileInput'
+                'removeFileObjects'
             ]);
         }
-        componentWillMount () {
-            this.reader = new FileReader();
-            this.reader.onload = this.onload;
-            this.resetFileInput();
-        }
         componentDidUpdate (prevProps) {
             if (this.props.isLoadingUpload && !prevProps.isLoadingUpload) {
-                if (this.fileToUpload && this.reader) {
-                    this.reader.readAsArrayBuffer(this.fileToUpload);
-                } else {
-                    this.props.cancelFileUpload(this.props.loadingState);
-                }
+                this.handleFinishedLoadingUpload(); // cue step 5 below
             }
         }
         componentWillUnmount () {
-            this.reader = null;
-            this.resetFileInput();
+            this.removeFileObjects();
         }
-        resetFileInput () {
-            this.fileToUpload = null;
-            if (this.fileInput) {
-                this.fileInput.value = null;
-            }
+        // step 1: this is where the upload process begins
+        handleStartSelectingFileUpload () {
+            this.createFileObjects(); // go to step 2
         }
-        getProjectTitleFromFilename (fileInputFilename) {
-            if (!fileInputFilename) return '';
-            // only parse title with valid scratch project extensions
-            // (.sb, .sb2, and .sb3)
-            const matches = fileInputFilename.match(/^(.*)\.sb[23]?$/);
-            if (!matches) return '';
-            return matches[1].substring(0, 100); // truncate project title to max 100 chars
+        // step 2: create a FileReader and an <input> element, and issue a
+        // pseudo-click to it. That will open the file chooser dialog.
+        createFileObjects () {
+            // redo step 7, in case it got skipped last time and its objects are
+            // still in memory
+            this.removeFileObjects();
+            // create fileReader
+            this.fileReader = new FileReader();
+            this.fileReader.onload = this.onload;
+            // create <input> element and add it to DOM
+            this.inputElement = document.createElement('input');
+            this.inputElement.accept = '.sb,.sb2,.sb3';
+            this.inputElement.style = 'display: none;';
+            this.inputElement.type = 'file';
+            this.inputElement.onchange = this.handleChange; // connects to step 3
+            document.body.appendChild(this.inputElement);
+            // simulate a click to open file chooser dialog
+            this.inputElement.click();
         }
-        // called when user has finished selecting a file to upload
+        // step 3: user has picked a file using the file chooser dialog.
+        // We don't actually load the file here, we only decide whether to do so.
         handleChange (e) {
             const {
                 intl,
@@ -92,73 +93,95 @@ const SBFileUploaderHOC = function (WrappedComponent) {
                 projectChanged,
                 userOwnsProject
             } = this.props;
-
             const thisFileInput = e.target;
             if (thisFileInput.files) { // Don't attempt to load if no file was selected
                 this.fileToUpload = thisFileInput.files[0];
 
                 // If user owns the project, or user has changed the project,
-                // we must confirm with the user that they really intend to replace it.
-                // (If they don't own the project and haven't changed it, no need to confirm.)
+                // we must confirm with the user that they really intend to
+                // replace it. (If they don't own the project and haven't
+                // changed it, no need to confirm.)
                 let uploadAllowed = true;
                 if (userOwnsProject || (projectChanged && isShowingWithoutId)) {
                     uploadAllowed = confirm( // eslint-disable-line no-alert
                         intl.formatMessage(sharedMessages.replaceProjectWarning)
                     );
                 }
                 if (uploadAllowed) {
+                    // cues step 4
                     this.props.requestProjectUpload(loadingState);
                 } else {
-                    this.resetFileInput();
+                    // skips ahead to step 7
+                    this.removeFileObjects();
                 }
                 this.props.closeFileMenu();
             }
         }
-        // called when file upload raw data is available in the reader
+        // step 4 is below, in mapDispatchToProps
+
+        // step 5: called from componentDidUpdate when project state shows
+        // that project data has finished "uploading" into the browser
+        handleFinishedLoadingUpload () {
+            if (this.fileToUpload && this.fileReader) {
+                // begin to read data from the file. When finished,
+                // cues step 6 using the reader's onload callback
+                this.fileReader.readAsArrayBuffer(this.fileToUpload);
+            } else {
+                this.props.cancelFileUpload(this.props.loadingState);
+                // skip ahead to step 7
+                this.removeFileObjects();
+            }
+        }
+        // used in step 6 below
+        getProjectTitleFromFilename (fileInputFilename) {
+            if (!fileInputFilename) return '';
+            // only parse title with valid scratch project extensions
+            // (.sb, .sb2, and .sb3)
+            const matches = fileInputFilename.match(/^(.*)\.sb[23]?$/);
+            if (!matches) return '';
+            return matches[1].substring(0, 100); // truncate project title to max 100 chars
+        }
+        // step 6: attached as a handler on our FileReader object; called when
+        // file upload raw data is available in the reader
         onload () {
-            if (this.reader) {
+            if (this.fileReader) {
                 this.props.onLoadingStarted();
                 const filename = this.fileToUpload && this.fileToUpload.name;
-                this.props.vm.loadProject(this.reader.result)
+                this.props.vm.loadProject(this.fileReader.result)
                     .then(() => {
                         this.props.onLoadingFinished(this.props.loadingState, true);
-                        // Reset the file input after project is loaded
-                        // This is necessary in case the user wants to reload a project
                         if (filename) {
                             const uploadedProjectTitle = this.getProjectTitleFromFilename(filename);
                             this.props.onUpdateProjectTitle(uploadedProjectTitle);
                         }
-                        this.resetFileInput();
                     })
                     .catch(error => {
                         log.warn(error);
                         this.props.intl.formatMessage(messages.loadError); // eslint-disable-line no-alert
                         this.props.onLoadingFinished(this.props.loadingState, false);
-                        // Reset the file input after project is loaded
-                        // This is necessary in case the user wants to reload a project
-                        this.resetFileInput();
+                    })
+                    .then(() => {
+                        // go back to step 7: whether project loading succeeded
+                        // or failed, reset file objects
+                        this.removeFileObjects();
                     });
             }
         }
-        handleStartSelectingFileUpload () {
-            // open filesystem browsing window
-            this.fileInput.click();
-        }
-        setFileInput (input) {
-            this.fileInput = input;
+        // step 7: remove the <input> element from the DOM and clear reader and
+        // fileToUpload reference, so those objects can be garbage collected
+        removeFileObjects () {
+            if (this.inputElement) {
+                this.inputElement.value = null;
+                document.body.removeChild(this.inputElement);
+            }
+            this.inputElement = null;
+            this.fileReader = null;
+            this.fileToUpload = null;
         }
         render () {
-            const fileInput = (
-                <input
-                    accept=".sb,.sb2,.sb3"
-                    ref={this.setFileInput}
-                    style={{display: 'none'}}
-                    type="file"
-                    onChange={this.handleChange}
-                />
-            );
             const {
                 /* eslint-disable no-unused-vars */
+                cancelFileUpload,
                 closeFileMenu: closeFileMenuProp,
                 isLoadingUpload,
                 isShowingWithoutId,
@@ -177,7 +200,6 @@ const SBFileUploaderHOC = function (WrappedComponent) {
                         onStartSelectingFileUpload={this.handleStartSelectingFileUpload}
                         {...componentProps}
                     />
-                    {fileInput}
                 </React.Fragment>
             );
         }
@@ -210,19 +232,25 @@ const SBFileUploaderHOC = function (WrappedComponent) {
             loadingState: loadingState,
             projectChanged: state.scratchGui.projectChanged,
             userOwnsProject: ownProps.authorUsername && user &&
-                (ownProps.authorUsername === user.username)
-            // vm: state.scratchGui.vm
+                (ownProps.authorUsername === user.username),
+            vm: state.scratchGui.vm // NOTE: double check this belongs here
         };
     };
     const mapDispatchToProps = (dispatch, ownProps) => ({
         cancelFileUpload: loadingState => dispatch(onLoadedProject(loadingState, false, false)),
         closeFileMenu: () => dispatch(closeFileMenu()),
+        // transition project state from loading to regular, and close
+        // loading screen and file menu
         onLoadingFinished: (loadingState, success) => {
             dispatch(onLoadedProject(loadingState, ownProps.canSave, success));
             dispatch(closeLoadingProject());
             dispatch(closeFileMenu());
         },
+        // show project loading screen
         onLoadingStarted: () => dispatch(openLoadingProject()),
+        // step 4: transition the project state so we're ready to handle the new
+        // project data. When this is done, the project state transition will be
+        // noticed by componentDidUpdate()
         requestProjectUpload: loadingState => dispatch(requestProjectUpload(loadingState))
     });
     // Allow incoming props to override redux-provided props. Used to mock in tests.