Ways to include extra information in a request when uploading images using Django's CKEditor?

On my website, I am utilizing django-ckeditor to allow users to input rich text content. Each webpage on the site represents a unique document identified by an id.

For instance, two different documents will have separate webpages with URLs like -

example.com/documents/doc1 and example.com/documents/doc2

Both of these web pages contain multiple CKEDITOR instances. My goal is to direct images uploaded through CKEDITOR on webpage example.com/documents/doc1 to a specific directory

/media/uploads/doc1/ 

and images uploaded through CKEDITOR on webpage example.com/documents/doc2 to another directory -

/media/uploads/doc2/

However, an issue arises in the upload view method in views.py of the django-ckeditor module -

def post(self, request, **kwargs):
    """
    Uploads a file and sends back its URL to CKEditor.
    """
    # Get the uploaded file from the request.
    upload = request.FILES['upload']

    # Verify that the file is a valid image.
    backend = image_processing.get_backend()
    try:
        backend.image_verify(upload)
    except utils.NotAnImageException:
        return HttpResponse("""
                   <script type='text/javascript'>
                        alert('Invalid image')
                        window.parent.CKEDITOR.tools.callFunction({0});
                   </script>""".format(request.GET['CKEditorFuncNum']))

    # Open output file in which to store the upload.
    upload_filename = get_upload_filename(upload.name, request.user)
    saved_path = default_storage.save(upload_filename, upload)

    if backend.should_create_thumbnail(saved_path):
        backend.create_thumbnail(saved_path)

    url = utils.get_media_url(saved_path)

    # Respond with Javascript sending ckeditor upload URL.
    return HttpResponse("""
    <script type='text/javascript'>
        window.parent.CKEDITOR.tools.callFunction({0}, '{1}');
    </script>""".format(request.GET['CKEditorFuncNum'], url))

The upload_filename is generated as get_upload_filename(upload.name,request.user)

This function takes the filename and request.user as inputs and saves files in user-specific folders. How can I pass the document id from the URL to the post request so that I can utilize it to save images in document-specific directories?

If further clarification is required, please leave a comment below, and I will provide additional information. Thank you.

Answer №1

Make sure to include the following line in the configuration file under filebrowserUploadUrl:

config.filebrowserUploadUrl = "/upload.php?docid=" + docid;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to delete a specific item by its ID from MongoDB within a Next.js application

Currently, I am building a todo app in nextjs to enhance my skills. However, I'm encountering some difficulties in deleting single todos from the database using the deleteOne function. Below is the frontend call: async function deleteTodo(id) { a ...

Using jQuery's setInterval to consistently refresh the value of a data attribute

I am struggling to dynamically update the data-left value of a div with the class name "tw_marquee_scroller" every 1 second. The intended behavior is for the value to increment by 10 each time, starting at 10 and increasing by 10 in subsequent seconds. H ...

Failed submission: XMLHttpRequest and FormData not processing data correctly

I'm attempting to use AJAX to submit a form using the post method along with a FormData object. Here's a simplified version of the JavaScript code: var form=…; // form element var url=…; // action form['update'].onclick=function ...

`In Node.js, retry attempts resulted in an HTTP 504 status code.`

I have a scenario where my http server always returns a 504 status code: const express = require('express') const app = express() app.get('/', (req, res) => { console.log('I AM HERE'); res.status(504).send('N ...

Determine which JavaScript script to include based on whether the code is being executed within a Chrome extension

I am in the process of developing a Chrome extension as well as a web JavaScript application. I currently have an HTML container. I need the container.html file to include <script src="extension.js"> when it is running in the Chrome extension, and ...

What is the best way to access data from outside a forEach loop in JavaScript?

I am trying to access the value of my uid outside of the foreach loop in my code. Can anyone assist me with this? This is the code I am working with: var conf_url = "https://192.168.236.33/confbridge_participants/conference_participants.json?cid=009000 ...

"The function within the Sails.js model is not properly returning a value when rendered

Within my Sails.js application, I am currently attempting to retrieve the total number of users that have been approved in my database and utilize this count variable within my view by employing the count() query. Below is the snippet of code present in my ...

How to store angular 2 table information generated using ngFor

I am currently working on a project where I need to create an editable table using data retrieved from the back end. My goal now is to save any updated data. I attempted to use formControl, but it seems to only save the data in the last column. Below is a ...

Looking for a foolproof method to determine if a string contains any of the elements in a given array of substrings? And if found, how

I am currently faced with the task of decoding multiple URLs, specifically focusing on encoded special characters like "+", "|", and more. My approach involves having a collection of encoded characters that I need to locate in the URL string. What is the ...

Troubleshooting difficulties integrating NodeJS with R using an R script

I have been attempting to execute an R-script from a js-file but I am consistently receiving a null value as the return. Here is my folder structure: -R_test --example.js --helloWorld.R The contents of example.js are as follows: var R = require(" ...

Using jquery to update a link when a different link is clicked

Recently, I've started using JQuery and encountered a challenge. When I click on the first link, an Ajax request is sent to the server and data is received successfully. However, in the callback function, I'm struggling to change the display text ...

Chromium is having issues with updating the dynamic source attribute

One portion of my script that pertains to the question is as follows: <script type="text/javascript> function handleImageClick() { var image = $("#image_id"); $(image).attr("src", "ajax-loader.gif"); $.ajax({ ...

Problems with Angular UI Router: Functions not functioning properly within the template

Currently, I am delving into the realm of Angular UI Router in order to effectively manage different sections of my application. If you'd like, check out this plunkr (http://plnkr.co/edit/KH7lgNOG7iCAEDS2D3C1?p=preview) Here are some issues that I&a ...

React throwing an error when attempting to include a Link component from react-router-dom

Currently working on a React app and encountering an issue while trying to add the Link component from the react-router-dom package. The main routes are defined in the App.js file structured as follows: https://i.stack.imgur.com/BF8M8.png The <Header ...

What is causing the onclick event to not function properly when called from an external .js file?

I've created a .js file that contains code for a photo album application. The file includes functions for changing images when buttons are clicked. However, when I interact with the buttons, the images do not change as expected. The code in the .js f ...

Is it possible to delete a <div> tag based on screen size using jQuery or JavaScript?

Hello, I was curious if it's possible to dynamically remove a specific div tag using jQuery or JavaScript when the screen reaches a certain size, for example 500px. ...

When attempting to submit data, the Magnific Popup page is restored to its default format

I am facing an issue with my Magnific Popup page: function dataLink(){ $.magnificPopup.open({ items: { src: 'datapage.html', type: 'ajax' }, closeOnContentClick : false, clos ...

Guidelines on resolving the issue of Unsupported platform for [email protected]: requested {"os":"darwin","arch":"any"} (existing: {"os":"win32","arch":"x64"})

Trying to install Parallelshell but encountering a persistent warning. I've checked the package file multiple times without finding a solution. Can someone assist me with this issue? ...

Implementing JavaScript Code in TypeScript

Every JavaScript code should also be valid in TypeScript, but when attempting to run the following code snippet below, an error is triggered. Could someone convert this JavaScript code into TypeScript? Error: 20:9 - TS2531 Error: Object is possibly 'z ...

How does reactjs distinguish between render and return?

I am a beginner in the world of JavaScript. I often come across the terms "return" and "render" in various contexts, but I'm curious about their differences. ...