upload images and videos - 1

Doyin Atobaru answered on January 29, 2025 Popularity 1/10 Helpfulness 1/10

answer upload images and videos - 1

related how to sync folders between ssh and local

upload images and videos - 1

Comment

const FormStep3 = ({ form }: FormStepsProps) => {
  const [selectedFiles, setSelectedFiles] = useState<File[] | any>([]);
  const [dropDisplay, setDropDisplay] = useState(false);
  const { setValue } = form;

  // this handles the image drop event 
  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const files = Array.from(event.dataTransfer.files);
    const newFiles = files.filter(file => !selectedFiles.some(f => f.name === file.name));
    const updatedFiles = [...selectedFiles, ...newFiles];
    setSelectedFiles(updatedFiles);

    console.log('selectedFiles', updatedFiles);
    setValue('media', updatedFiles, { shouldValidate: true });
    setDropDisplay(false);
  };

  //prevent the browser's default behaviour when you drag image over it
  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setDropDisplay(true);
  };

  //this handle the image(file) change event
  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || []);
    const newFiles = files.filter(file => !selectedFiles.some(f => f.name === file.name));
    const updatedFiles = [...selectedFiles, ...newFiles];
    setSelectedFiles(updatedFiles);

    console.log('selectedFiles', updatedFiles);
    setValue('media', updatedFiles, { shouldValidate: true });
  };

  const removeFile = (index: number) => {
    setSelectedFiles(prevFiles => {
      const updatedFiles = prevFiles.filter((_, i) => i !== index);

      console.log('updatedFiles:', updatedFiles);
      setValue('media', updatedFiles, { shouldValidate: true });

      return updatedFiles;
    });
  };

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript upload

Link to this answer
Share Copy Link

Contributed on Jan 31 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

how to sync folders between ssh and local

Comment

rsync -azP /Users/{username}/code/images/ username@mysite.example.com:/home/forge/mydirectory/storage/app/public

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: gist.github.com

Tags: local ssh sync whatever between

Link to this answer
Share Copy Link

Contributed on Jan 29 2025

Bherto ThirtyNine

0 Answers Avg Quality 2/10

upload images and videos - 1

Contents

More Related Answers

upload images and videos - 1

Closely Related Answers

how to sync folders between ssh and local

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.