XaSuMu/imports/ui/files/AvatarFileUpload.jsx

import { useTracker, useSubscribe, useFind } from 'meteor/react-meteor-data/suspense';
import { Meteor } from 'meteor/meteor';
import React, { useState, useRef, Suspense } from 'react';
// import PropTypes from 'prop-types';
import { AvatarsRegistre } from '/imports/api/files.js';

import IndividualFileStart from '/imports/ui/files/IndividualFile.jsx'; // <-------------------------

import _ from 'lodash';

//const debug = require('debug')('demo:file');

const AvatarFileUpload = (props) => {
  
  const [uploading, setUploading] = useState([]);
  const [progress, setProgress] = useState(0);
  const [inProgress, setInProgress] = useState(false);
  
  const [preview, setPreview] = useState("");

  // const reseter = useState(0);

  // const refForm = useRef();
  const fileinput = useRef();

  useSubscribe('avatarsregistre.all');

  const files = useFind(AvatarsRegistre, [
    {},
    { sort: { createdAt: -1 } },
  ]);

  // const files = useTracker("avatars", async () => {
  // // const docsReadyYet = filesHandle.ready();
  //   const files = await AvatarsRegistre?.find({meta:{userId: props.uidProvisional || Meteor.userId(), entId: props.entId}}, {sort: {name: 1}})//.fetchAsync(); // Meteor.userId() ?? "nop"
  
  //   return files;
  // }, []);

  function uploadIt(e) {
    e.preventDefault();

    //let self = this;

    if (e.currentTarget.files && e.currentTarget.files[0]) {
      // We upload only one file, in case
      // there was multiple files selected
      var file = e.currentTarget.files[0];

      const reader = new FileReader();

      reader.onload = (event) => {
        console.log("eventTarget: ", event.target);
        setPreview(event.target.result);
      };
      
      reader.readAsDataURL(file);

      // setPreview(file);

      if (file) {
        let uploadInstance = AvatarsRegistre.insert({
          file,
          meta: {
            locator: props.fileLocator,
            userId: props.uidProvisional || Meteor.userId(), // Optional, used to check on server for file tampering
            entId: props.entId
          },
          chunkSize: 'dynamic',
          allowWebWorkers: true // If you see issues with uploads, change this to false
        }, false)

        setUploading(uploadInstance); // Keep track of this instance to use below
        setInProgress(true); // Show the progress bar now
        
        // These are the event functions, don't need most of them, it shows where we are in the process
        uploadInstance.on('start', function () {
          console.log('Starting');
        })

        uploadInstance.on('end', function (error, fileObj) {
          console.log('On end File Object: ', fileObj);
        })

        uploadInstance.on('uploaded', function (error, fileObj) {
          console.log('uploaded: ', fileObj);

      //    props.setUpId(fileObj._id);

          // Remove the filename from the upload box
          fileinput.current.value = '';

          // Reset our state for the next file
          setUploading([]);
          setProgress(0);
          setInProgress(false);
        })

        uploadInstance.on('error', function (error, fileObj) {
          console.log('Error during upload: ' + error)
        });

        uploadInstance.on('progress', function (progress, fileObj) {
          console.log('Upload Percentage: ' + progress)
          // Update our progress bar
          setProgress(progress);
        });

        uploadInstance.start(); // Must manually start the upload
      }
    }
  }

  // This is our progress bar, bootstrap styled
  // Remove this function if not needed
  function UploadingFile({preview}) {
    
    // console.log('**********************************', uploading);

    if (!_.isEmpty(uploading)) {
      // console.log("uploading: ", uploading);
      // console.log("preview: ", preview);
      return <div>
        <img
          src={preview}
          alt=""
          style={{
            border: `solid 3px #6666`,
            borderRadius: `50%`,
            width: `5rem`,
            margin: `0 auto`,
            display: `block`
          }}
        />
        
        <br />

        {/* {uploading.file.name} */}

        <div className="progress progress-bar-default">
          <div style={{width: progress + '%', backgroundColor: `lime`, borderRadius: `1rem`, textAlign: `center`, boxShadow: `inset 0 0 .5rem .5rem #4447`}} aria-valuemax="100"
            aria-valuemin="0"
            aria-valuenow={progress || 0} role="progressbar"
            className="progress-bar"
          >
            <span className="sr-only">{progress}% Complete (success)</span>
            {/* <span>{progress}%</span> */}
          </div>
        </div>
      </div>
    }
  }

  const Display = async () => await files?.map(async (aFile, key) => {
      
    let link = await AvatarsRegistre.findOneAsync({_id: aFile._id});  //The "view/download" link
    let linkOriginalURL = `${window.location.origin}${link._fileRef._downloadRoute}/${link._fileRef._collectionName}/${link._fileRef._id}/original/${link._fileRef._id}.${link._fileRef.extension}`;

    // Send out components that show details of each file

    return <Suspense fallback="<>Loading...</>">
      <div key={'file' + key}>
        <IndividualFileStart
          fileName={aFile.name}
          fileUrl={linkOriginalURL}
          fileId={aFile._id}
          fileSize={aFile.size}
        />
      </div>
    </Suspense>
}).reverse();

      // Run through each file that the user has stored
      // (make sure the subscription only sends files owned by this user)
      // let display = 

  return <Suspense fallback="Loading...">

    <button
      className='btArxiu'
      onClick={ev => {
        ev.preventDefault();

        // refForm.current.reset();
        fileinput.current.click();
        //reseter[1](reseter[0] + 1);
        //refForm.current.reset();
        ev.target.value = null;
      }}
    >
      <span className="fa-solid fa-paperclip" >Add file</span>
    </button>

    <input type="file" 
      id="fileinput" 
      disabled={inProgress} 
      ref={fileinput}
      onChange={uploadIt} 
      style={{display: `none`}}
    />

    <UploadingFile {...{preview}} />
    <Display />

  </Suspense>
    // else return <div>Carregant llista d'arxius...</div>;
};

//
// This is the HOC - included in this file just for convenience, but usually kept
// in a separate file to provide separation of concerns.
//
// export default withTracker( ( props ) => {

//   const filesHandle = Meteor.subscribe('files.all');
//   const docsReadyYet = filesHandle.ready();
//   const files = AvatarsRegistre.find({meta:{userId: props.uidProvisional || Meteor.userId()}}, {sort: {name: 1}}).fetch(); // Meteor.userId() ?? "nop"

//   return {
//     docsReadyYet,
//     files,
//   };

// })(FileUploadComponent);

export default AvatarFileUpload;