flaskbootstrap-cards

Flask - Delete image from static (boostrap card)


I'm trying to create a functionnality where the user is able to upload and delete some images on the fly. The deleting part works but not completely... it successfully deletes an image from my static folder, but for some reason it only deletes the first image it finds, and not the one that linked to the bootrap card. For some reason it is not properly identifying the correct value and I can't figure out why :

1. Flask

@app.route('/deleteImg', methods=['GET', 'POST'])
def deleteImg(row):
if request.method == 'POST':
    image_to_del = request.values.get('image_to_del', None)
    print(f'image_to_del:{image_to_del}')
    os.remove(os.path.join(UPLOAD_FOLDER,image_to_del))
   
    return redirect('/uploadimg')
return render_template('uploadimg.html')

2. HTML

<form action="{{url_for('deleteImg')}}" method="POST">
<div class="row">
    {% for row in pics %}
      <div class="col-md-3 mt-3">
        <div class="card">
            <img src="{{ url_for('static', filename='pics/'+row)}}" alt="{{row}}" class="card_img_top" height="200">
            <input type="hidden" name="image_to_del" class="image_to_del" value="{{row}}">Filename : {{row}}</input>
            <h5 class="text-cent" >Filename : {{row}}</h5>
        </div>
        <div class="card-footer text-center">
            <input type="submit" value="Delete" class="btn btn-success" />

        </div>
      </div>
    {% endfor %}
</div>
</form>

Solution

  • I found this solution for those who might be interested. This is based on the work of "Cairocoders" Flask delete image from db

    1. FLASK

    @app.route('/deletelogo/<string:get_ig>', methods=['GET', 'POST'])
    def deletelogo(get_ig):
      
      print(f'get_ig :{get_ig}')
      os.remove(os.path.join(LOGO_FOLDER,get_ig))
      return redirect('/logoimg')
    

    2. HTML

        <div class="row">
        {% for row in pics %}
          <div class="col-md-3 mt-3">
            <div class="card">
                <img src="{{ url_for('static', filename='logo/'+row)}}" alt="{{row}}" class="card_img_top" height="200">
                <input type="hidden" name="image_to_del" class="image_to_del" value="{{row}}">Filename : {{row}}</input>
                <h5 class="text-cent" >Filename : {{row}}</h5>
            </div>
            <div class="card-footer text-center">
                <td><p><a href="/deletelogo/{{row}}" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></a></p></td>
        </div>
     </div>