Firebase Upload URL issue

[AlexHyslop]

I am trying to use this with Firebase but am having issues getting the uploadURL to work. The images are not getting uploaded to Firebase

my form :

<form class="comment-form" onSubmit={this.handleSubmit} onFocus={this.handleFocus}>
<div className="form-group comment-reply-content">
                        
<TrixEditor
      autoFocus={true}
      placeholder="editor's placeholder"
      value="initial content <strong>for the editor</strong>"
      uploadURL="https://firebasestorage.googleapis.com/v0/b/boomapp-8d7cc.appspot.com/o/"
      uploadData={{"key1": "value", "key2": "value"}}
      mergeTags={mergeTags}
      onChange={this.handleChange}
       onEditorReady={this.handleEditorReady}
/>
</div>
<div className="form-group">
          <input type="submit" className="btn btn-primary"  />
</div>
</form>

[dstpierre]

Hi @AlexHyslop I think you'll need to supply a firebase function where you'll handle the multipart/form-data to upload the file than upload to your firebase storage.

If you can share more information about what this uploadURL you're setting, it seems to be the storage API directly, it has to pass to a web handler first that process the file upload.

Hope that help.

[hanu7674]

could you please make a function to handle multipart/form-data . and what link we have to use in uploadURL attribute according to the trix-attributes.

[christiangenco]

To upload files with TrixEditor to Firebase Cloud Storage you need to listen for the trix-attachment-add event and then call uploadBytes or uploadBytesResumable from the firebase/storage library.

I'm doing something like this to allow trix attachment uploads to Firebase cloud storage on my app, Fileinbox, using Firebase v9:

import { useEffect, useState } from "react";
import { getStorage, ref, uploadBytes, deleteObject } from "firebase/storage";

function TrixComponent({ value, onChange }) {
  const [editor, setEditor] = useState(null);

  const storage = getStorage();

  const events = {
    "trix-attachment-add": async (e) => {
      const file = e.attachment.file;
      if (file) {
        const storageRef = ref(storage, file.name);
        const snap = await uploadBytes(storageRef, file);
        const url = await getDownloadURL(snap.ref);
        e.attachment.setAttributes({ url, href: url });
      }
    },
    "trix-attachment-remove": (e) => {
      const storageRef = ref(storage, e.attachment.attachment.attributes.values.path);
      remove(storageRef);
    },
    "trix-file-accept": (e) => {
      if (!e.file.type.includes("image/")) {
        alert("Only image attachments are allowed for now.");
        e.preventDefault();
      }
    },
  };
  
  // add event listeners to the Trix object instead of on window to support multiple Trix editors per page
  useEffect(() => {
    if (editor)
      Object.entries(events).forEach(([name, fn]) =>
        editor.element.addEventListener(name, fn)
      );
    return () =>
      Object.entries(events).forEach(([name, fn]) =>
        editor?.element.removeEventListener(name, fn)
      );
  }, [editor]);

  return (
    <TrixEditor
      onEditorReady={setEditor}
      value={value}
      onChange={(html, text) => onChange(html)}
    />
  );
}