Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74102

Send files from Flask to HTML for JavaScript processing

$
0
0

I'm trying to load an xml/musicxml file in Flask and an audio file, save them on the server and send them to complete.html where they should be processed by javascript through the id when the page is loaded.

Flask code:

from flask import Flask, render_template, request, jsonify, send_from_directory
from werkzeug.utils import secure_filename
import AlignmentTest as at

UPLOAD_FOLDER = './instance/uploads'
ALLOWED_EXTENSIONS = {'mp3' , 'wav', 'xml', 'musicxml'}

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
CORS(app)
cors = CORS(app, resources={r"/uploads/*": {"origins": "http://localhost:8888"}, r"/download/*": {"origins": "*"}})


@app.route('/', methods = ['POST', 'GET'])
def upload_form():

    if request.method == 'POST':
        xml = request.files['file1'] #Files I need to reload in complete.html
        audio = request.files['file2']

        #Validation and process files
        pathAudio, pathNewMidi, pathNewMpos = ProcessFiles(xml, audio)

        filexml = secure_filename(xml.filename)
        fileaudio = secure_filename(audio.filename)
        return render_template('complete.html', xml_file = filexml, audio_file = fileaudio)

    return render_template('upload.html')


@app.route('/uploads/<filename>')
def send_audio(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

@app.route('/uploads/<filename>')
def send_xml(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

Here is upload.html, where I load XML and audio files:

<div id="medbts">
        <h2>Select file(s) to upload</h2>
            <form method="post" action="/" enctype="multipart/form-data">
                <label><span id="abclbl">XML: </span><div id="abcfile">
                       <input type="file" name="file1" multiple="true" id="fknp" accept=".abc,.xml, .musicxml, .js" tabindex="1"/></div></label>
                <label id="medlbl">Sound: <div id="mediafile">
                       <input type="file" name="file2" multiple="true" id="mknp" accept="audio/*, video/*" tabindex="2"/></div></label>

                <p>
                    <input type="submit" value="Submit">
                </p>                
             </form>
    </div>

They are processed and you should send them back to complete.html to be recognized by ID in html and processed automatically by javascript, however, that does not happen. Here is the HTML code for complete.html:

<div id="buttons">
    <div style="height: 5px;"></div>
    <div id="medbts">
        <label>
            <span id="abclbl">Midi: </span>
            <div id="abcfile">
                <input type="file" id="fknp" accept=".abc,.xml,.js" tabindex="1" src="{{ url_for('send_xml', filename = xml_file)}}"/>
                "{{ url_for('send_xml', filename = xml_file)}}"</div>
        </label>
        <label id="medlbl">Sound: 
            <div id="mediafile">
                <input type="file" id="mknp" accept="audio/*, video/*" tabindex="2" 
                src="{{ url_for('send_audio', filename = audio_file)}}"/>
                "{{ url_for('send_audio', filename = audio_file)}}"</div>
        </label>
    <div>
</div>

I used SRC to try to load the values even though that doesn't work. The file path is displayed correctly.

Thanks for help.


Viewing all articles
Browse latest Browse all 74102

Trending Articles