How can I upload an image directly to the server using Retrofit – kotlin

I’m trying to upload an image taken with the device camera directly to the server without saving the jpeg file on device but I couldn’t done it and I’m stuck at this point someone please help me with this one?

This is my function that takes photos when you press the button:

    private fun takePhoto() {

        // Get a stable reference of the modifiable image capture use case
        val imageCapture = imageCapture ?: return

       // Create time stamped name and MediaStore entry.
    val name =
        SimpleDateFormat(FILENAME_FORMAT, Locale.US).format(System.currentTimeMillis())
    val contentValues =
        ContentValues().apply {
            put(MediaStore.MediaColumns.DISPLAY_NAME, name)
            put(MediaStore.MediaColumns.MIME_TYPE, "image/jpeg")
            if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) {
                put(MediaStore.Images.Media.RELATIVE_PATH, "Pictures/CameraX-Image")

    // Create output options object which contains file + metadata
    val outputOptions =
                contentResolver, MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues

        // Set up image capture listener, which is triggered after photo has been taken
            object : ImageCapture.OnImageCapturedCallback() {
                override fun onError(exc: ImageCaptureException) {
                    Log.e(TAG, "Photo capture failed: ${exc.message}", exc)

                override fun onCaptureSuccess(image: ImageProxy) {




and this is where I tried to write an upload function:

    private fun uploadImage(){
        val file = File(cacheDir, "myImage.jpg")
        file.outputStream().use {

this is Interface for Retrofit

interface FileApi {

        "Accept: ",
        "User-Agent: ",

    suspend fun uploadImage(
        @Part image: MultipartBody.Part

    companion object{
        val instance by lazy {


finally this is the FileRepository.kt class I’ve created

class FileRepository {

    suspend fun  uploadImage(file: File): Boolean {
        return try {
                image = MultipartBody.Part
        } catch (e: IOException){
        } catch (e: HttpException){

I’m new in this and I really don’t know what to do at this point thanks in advance.

Flex-Wrap doesn´t start at the same level

I am trying to do a flex-wrap to position the labels, but the main one does not start at the beginning and the others are at the same level



.list {
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;

.item {
  list-style: none;
  display: flex;
  gap: 5px;
  padding: 3.5px 10.1px 4.5px 13px;
  align-items: center;
  border-radius: 11px;
  background-color: #d5f5ff;
  width: max-content;
  font-size: 12px;
<ul class="list">
  <li class="item">React Js</li>
  <li class="item">Python</li>
  <li class="item">Solidity</li>
  <li class="item">PHP</li>
  <li class="item">C#.Net</li>
  <li class="item">Linux</li>
  <li class="item">Diseño UX & UI</li>
  <li class="item">JavaScript</li>
  <li class="item">Scrum</li>

Thanks for helping!