Flask, serving Static File and or folder inside Javascript

Question

I m trying to insert the following static url for a static folder inside a javascript so it can properly load a saved file, but i m still facing error.

Here is what happens.

the normal file location is http://localhost/static/uploads/filename.ext but with the following javascript, it fetch the location based on the views' url_prefix='/media' hence the url it fetches is http://localhost/media/static/uploads/filename.ext

here is the following code:

    <script>
$(function(){
        $('#fileupload').fileupload({
            url: 'upload',
            dataType: 'json',
            add: function (e, data) {
                data.submit();
            },
            success:function(response,status) {
            console.log(response.filename);
            var filePath = 'static/uploads/' + response.filename;

            $('#imgUpload').attr('src',filePath);
            $('#filePath').val(filePath);
                console.log('success');
            },
            error:function(error){
                console.log(error);
            }
        });
})

I m trying to replace,

var filePath = 'static/uploads/' + response.filename;

with

var filePath =  {{ url_for('static', filename='/uploads/') }} + response.filename;

but with no success. The original filename settings leads to the Blueprint url_prefix, which i wanted to bypass.

Edit

Here is my Views

@media.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        file = request.files['file']
        extension = os.path.splitext(file.filename)[1]
        f_name = str(uuid.uuid4()) + extension
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], f_name))
        return json.dumps({'filename':f_name})

@JohnMee, No file is being served with the javascript's filePath, aparrently, javascript is serving file as localhost/media/static/uploads/filename while the original file locaiton is localhost/static/uploads/filename — afidegnum
– afidegnum, Commented Feb 9, 2016 at 4:03
there might be some connection between the usage of @media.route and the undesired media insertion, but still you haven't told us the actual error message. What is the exact text of the error message that has you stumped? — John Mee
– John Mee, Commented Feb 9, 2016 at 8:11
@JohnMee, i didn't made myself clear earlier. here is what happens. with media blueprint the file url is localhost/media/static/uploads/filename but the real location of the file name should be localhost/static/uploads/filename so pointing the first url produce a 404 error — afidegnum
– afidegnum, Commented Feb 9, 2016 at 8:13
@JohnMee UPLOAD_FOLDER = os.path.abspath(os.path.dirname(__file__)+'/static/uploads') app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER — afidegnum
– afidegnum, Commented Feb 9, 2016 at 8:18

John Mee · Accepted Answer · 2016-02-09 08:31:05Z

1

There are two paths to consider here and you need to pay close attention to which you're using where:

the absolute filepath on the server eg: /opt/myapp/media/upload/<filename>, and
the relative urlpath on the client eg: https://localhost/static/upload/<filename>

Your easiest solution may be to simply return the filename, without any directory preamples, then prepend the appropriate directory for the context in which you use it.

So in the python you can still return 'somefile.jpg' with:

return json.dumps({'filename': f_name})

And in the javascript you can reference '/static/uploads/somefile.jpg' with:

var filepath = '/static/uploads/' + response.filename;

answered Feb 9, 2016 at 8:31

John Mee

52.6k39 gold badges158 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

afidegnum · Accepted Answer · 2016-02-09 08:51:08Z

0

Well, I have fixed the issue, I have stripped the url_prefix parameters so i can call from the root url path. to avoid the previous issue.

answered Feb 9, 2016 at 8:51

afidegnum

1711 gold badge4 silver badges23 bronze badges

Collectives™ on Stack Overflow

Flask, serving Static File and or folder inside Javascript

Edit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related