Skip to content

How to Upload PDF on react-quill #9

@daxdesai

Description

@daxdesai
 const quillRef = useRef(null);
  const dispatch = useDispatch();

  Quill.register("modules/imageResize", ImageResize);

  const handleConfirmCreateTicket = () => {
    console.log(createTicketData);
    setConfirmCreateTicket(false);
  };

  const uploadPDF = (file) => {
    const formData = new FormData();
    formData.append("type", "doc");
    formData.append("file", file);
    dispatch(uploadFile(formData)).then((res) => {
      if (res.type === "uploadFile/fulfilled") {
        return res.payload.url;
      }
    });
  };

  const handlePDFUpload = async (e) => {
    const file = e.target.files[0];
    if (file && file.type === "application/pdf") {
      // Assuming you have a function `uploadPDF` that uploads the file and returns a URL
      const pdfUrl = await uploadPDF(file);
      const editor = quillRef.current.getEditor();

      // Get the current selection range or set it to the end if there's no selection
      let range = editor.getSelection();
      if (!range) {
        range = { index: editor.getLength(), length: 0 }; // Place cursor at the end if no selection
      }

      editor.insertText(range.index, "PDF Link", "link", pdfUrl);
    } else {
      alert("Please select a valid PDF file.");
    }
  };
  
  
   <div className="relative">
                      <ImgIcon />
                      <input
                        type="file"
                        accept="application/pdf"
                        id="pdfUpload"
                        className="absolute top-0 left-0 w-full h-full opacity-0"
                        onChange={handlePDFUpload}
                      />
                    </div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions