[QUESTION] - Upload file in plugins

[Nicolas FAUGEROUX]

Environment:

• CTFd Version/Commit: 3.7.0
• Operating System: Linux Ubuntu 23.04
• Web Browser and Version: Version 125.0.2 (64 bits) for Ubuntu

Hello, I'm currently writing a CTFd plugin and I need to upload a file in the server. This is not a downloadable file for a challenge but it need to be associated while the creation of it.
So, I write a plugins/myplugin/assets/create.js file that is used by plugins/myplugin/assets/create.html for the new type of challenge.

All the plugins import mecanism seems to works well.

I would like to use the helpers module defined at themes/admin/assets/js/compat/helpers.js to use helpers.files.upload() function.
I tried severals things, but my mains hopes were :
First :

• add import { default as helpers } from "../../../themes/admin/assets/js/compat/helpers"; in create.js
• use helpers.files.upload(myform) in create.js
  but I have this error : Uncaught SyntaxError: import declarations may only appear at top level of a module

Second: (TEST ONLY)

• modify themes/admin/assets/js/compat/CTFd.js with import { default as helpers } from "./helpers"; and add helpers in const CTFd
• use CTFd.helpers.files.upload(myform) in create.js
  but I have this error : TypeError: CTFd.helpers is undefined

I'm newbie is JS, so I cannot figured how can I use this function ?

[Kevin Chung]

You could probably import the file from your javascript but honestly I would probably just recommend using a simple file input and avoiding adding the extra Javascript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

[Nicolas FAUGEROUX]

You could probably import the file from your javascript but honestly I would probably just recommend using a simple file input and avoiding adding the extra Javascript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

Thanks for the reply ! :)

I am currently using <input type="file" class="form-control" name="my-file" accept=".zip" required> in create.html.

I want to upload it in CTFd like this :

• Drop the file in <input type=file>
• Upload it in CTFd, that return me the path where is located in backend (ex: /uploads/b07afae95edec5d8a74c8d7b590feb63/myfile.zip`
• Send the location to my plugins with POST request

Then use the location in my plugin

[Kevin Chung]

My recommendation would just be to eschew the JS or to make your own JS in your own theme because it shouldn't be too complicated to just make your own JS uploader.

I think bundling or querying the JS is going to be fragile. You could also see if there's a function you can use in https://github.com/CTFd/CTFd.js but I don't think there is.

[Nicolas FAUGEROUX]

Hi,
I write this little function to upload file:

// upload scenario as file type=standard
function sendFile(file){
  return new Promise(function(resolve, reject) {
    var formData = new FormData();
    formData.append('file', file);
    formData.append('nonce', CTFd.config.csrfNonce);
    formData.append('type', 'standard') // explicit configuration

    $.ajax({
      url: '/api/v1/files',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      credentials: 'same-origin', // Include credentials
      success: function(response){
        resolve(response); 
      },
      error: function(xhr, status, error){
        reject(error); 
      }
    });
  });
}

I did'nt know why it was not working at first, but adding nonce seems to be mandatory in backend.
This is working, we can close the issue ;)