TinyMCE & Flask - 图片上传

Question

I am trying to integrate tinyMce on a blog app using Flask. I have the images uploading and displaying correctly inside the editor but when the user wants to read the entire article my image does not display.

     * Serving Flask app "blog.py"
     * Environment: production
       WARNING: This is a development server. Do not use it in a production deployment.
       Use a production WSGI server instead.
     * Debug mode: off
    [2020-08-31 19:08:56,321] INFO in __init__: Blog site startup.
     * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

    ...

    127.0.0.1 - - [31/Aug/2020 19:09:07] "POST /image-upload HTTP/1.1" 200 -
    Validating Image....[OK]
    /static/user_uploads/img_0992.jpeg
    127.0.0.1 - - [31/Aug/2020 19:09:37] "POST /create-post HTTP/1.1" 302 -
    127.0.0.1 - - [31/Aug/2020 19:09:37] "GET /index HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:37] "GET /jsglue.js HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:40] "GET /post/1 HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:40] "GET /jsglue.js HTTP/1.1" 200 -
    127.0.0.1 - - [31/Aug/2020 19:09:40] "GET /post/static/user_uploads/img_0992.jpeg HTTP/1.1" 404 

TinyMCE init:

tinymce.init({
    selector: 'textarea',
    plugins: [
        'advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'save table contextmenu directionality template paste textcolor codesample'
    ],
    toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist | link image | print preview media fullpage | emoticons',
    images_upload_url: Flask.url_for('blog.image_uploader'),
    images_reuse_filename: false,
    automatic_uploads: true,
});

Flask view:

@blog.route('/image-upload', methods=['POST'])
@login_required
def image_uploader():
    """
    Upload post images from tinyMce editor.
    Save image to path.
    returns: json { location: path }
    """

    # Get the file user has uploaded inside the tinymce editor.
    uploaded_file = request.files.get('file')

    if uploaded_file:
        filename = secure_filename(uploaded_file.filename).lower()

        # Validate the contents of the file.  Check the header of the file is infact an image.
        valid_img_ext = validate_img(uploaded_file.stream)

        # Split filename and extension, rename & add correct extension.
        filename = secure_filename(os.path.splitext(filename)[0] + valid_img_ext)

        img_path = os.path.join(current_app.config['IMG_UPLOAD_PATH'], filename)

        # Check if user directory exists, create if nessecary.
        if not os.path.exists(current_app.config['IMG_UPLOAD_PATH']):
            try:
                os.makedirs(current_app.config['IMG_UPLOAD_PATH'])
            except OSError as e:
                if e.errno != errno.EEXIST:
                    raise

        # Save the image.
        uploaded_file.save(img_path)
        location = url_for('static', filename='user_uploads/' + filename)
        print(location)

        # Return image path back to editor
        return jsonify({'location': location})

    abort(Response('404 - Image failed to upload'))


@blog.route('/post/<post_id>')
def post_detail(post_id):
    post = Post.query.get(post_id)
    return render_template('article.html', post=post)

As you can see above, the image validates and saves correctly. I then try to view the article and I get a 404 - /post/static/user_uploads/img_0992.jpeg How do I stop the path being prefixed with /post/ so I simply get /static/user_uploads/img_0992.jpeg

for example, changing

@blog.route('/post/<post_id>')

to

@blog.route('/<post_id>')

The image loads as it should, but this isn't a feasible solution

127.0.0.1 - - [31/Aug/2020 19:45:05] "GET /static/user_uploads/img_0992.jpeg HTTP/1.1" 200 -

Also, if I open up the console and add a / to the img src, the image loads as it should.

<img alt="" height="267" src="static/user_uploads/img_0992.jpeg" width="200">

to

<img alt="" height="267" src="/static/user_uploads/img_0992.jpeg" width="200">

Where am I going wrong with this?

Answer 1

Solved:

Needed to add

    relative_urls: false,
    images_upload_base_path: '/static/user_uploads',

to the tinymce.init()

example:

tinymce.init({
    selector: 'textarea',
    relative_urls: false,
    plugins: [
        'advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'save table directionality template paste codesample'
    ],
    toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist | link image | print preview media fullpage | emoticons',
    images_upload_url: Flask.url_for('blog.image_uploader'),
    images_reuse_filename: false,
    automatic_uploads: true,
    images_upload_base_path: '/static/user_uploads',
});

and return the filename from the view

return jsonify({'location': filename})

Answer 2

It prevents a new copy from being created when the uploaded file is edited with "images Tools". It is created only when you upload a new file.

Make the following setting.

tinymce.init({
            paste_data_images: false,
            images_reuse_filename: true,
            automatic_uploads: true,
            images_upload_handler: function (blobInfo, success, failure, progress) {
                                
                var  formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                
                $.ajax({
                    type:'POST',
                    url:  'ajax.upload.php',
                    data: formData,
                    dataType: 'json',
                    cache:false,
                    contentType: false,
                    processData: false,
                    success:function(r){
                        if (r.error) {
                            alert("r.error");
                        } else if (r.message) {
                            success(r.message.location);
                        }                        
                    },
                    complete: function (jqXHR,exception) {
                       $('.tox-dialog__busy-spinner').hide();
                    },
                    error: function (jqXHR,exception) {
                        
                    }
                });
                
            }  
  });

PHP CODE:

 // Yüklenecek dosya adı, yüklenen dosyaların adlarında var ise mevcut ad kullanılır.
    if( $_SESSION['TEMP_UPLOADED_IMAGES'][$handle_normal->file_src_name] === true ){
        
        // Dosya zaten mevcut ise otomatik olarak yeniden adlandırmayı devre dışı bırakır. Bu durumda mevcut dosya isimleri var ise üzerine yazılır.
        $handle_normal->file_overwrite = true;
        
             
        
        // Yüklenecek dosyanın adı mevcut adıyla kullanılır. Yeni adlandırma yapılmaz.
        $random_file_name = $handle_normal->file_src_name_body;
    } else {
        // Yüklenecek dosya rastgele adlandırılır.
        $random_file_name = $vd->randomNumbers(10));
    }

This code will run on every file upload. (after upload)

$_SESSION['TEMP_UPLOADED_IMAGES'][$handle_normal->file_dst_name] = true;